I am trying to push new pages inside the current page's <div> element. I have tried various methods found on SO but nothing worked for me. I have this code right now which doesn't work.
<ion-content padding>
<div #pageView>
</div>
</ion-content>
import { Component, ViewChild } from '#angular/core';
import { IonicPage, NavController, NavParams, PopoverController } from 'ionic-angular';
export class Vehiclemaintenance {
#ViewChild('pageView') nav: NavController
Constructor(public navCtrl: NavController){}
loadPage(){
this.nav.push(myComponent)
}
}
This causes an error
ERROR TypeError: _this.nav.push is not a function
Where am I going wrong!
* Update that worked *
Instead of using a <div> element I used <ion-nav>
Related
I'm Trying to call an API with ionic2, The data provider looks like this.the service returns an array of object.when i serve the app, the data is not displaying in the HTML template. How i can fix that issue.
import { Injectable } from '#angular/core';
import { Http } from '#angular/http';
import 'rxjs/add/operator/map';
#Injectable()
export class VideoService {
videos: any;
constructor(public http: Http) {
console.log('Hello videoService Provider');
}
getVideos(){
this.http.get('http://mizikjams-lorisson.rhcloud.com/api/videos.json')
.map(res => res.json()).subscribe(data => {
this.videos= data.videos;
console.log(this.videos);
});
}
}
here's the html template code
<ion-content class=" mainpage card-background-page ">
<ion-list>
<ion-item *ngFor="let video of videos">
<ion-avatar item-left>
<img src="{{video.image}}">
</ion-avatar>
<h2>{{video.title}}</h2>
</ion-item>
</ion-list>
<div class="floatingbtn">
<ion-fab bottom right edge >
<button ion-fab color="orange" (click)="search();"><ion-icon name="search"></ion-icon></button>
</ion-fab>
</div>
</ion-content>
see working plunker - http://plnkr.co/edit/JtLm3K?p=preview
make sure you add the provider to the app.module
#NgModule({
imports: [ IonicModule.forRoot(AppComponent) ],
declarations: [ AppComponent, HomePage ],
entryComponents: [ HomePage ],
bootstrap: [ IonicApp ],
providers: [VideoService]
})
export class AppModule { }
provider
import { Injectable } from '#angular/core';
import { Http } from '#angular/http';
import 'rxjs/add/operator/map';
#Injectable()
export class VideoService {
videos: any;
constructor(public http: Http) {
console.log('Hello videoService Provider');
}
getVideos(){
return this.http.get('http://mizikjams-lorisson.rhcloud.com/api/videos.json')
.map(res => res.json());
}
}
page1.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { VideoService } from './videoService'
#Component({
selector: 'page-home',
templateUrl: 'app/home.page.html'
})
export class HomePage {
appName = 'Ionic App';
videos:any
constructor(public navController: NavController, public vs : VideoService) {
this.videos = this.vs.getVideos()
}
}
html
<ion-header>
<ion-navbar>
<ion-title>{{ appName }}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item *ngFor="let video of (videos | async)?.videos ">
<ion-avatar item-left>
<img src="{{video.image}}">
</ion-avatar>
<h2>{{video.title}}</h2>
</ion-item>
</ion-list>
</ion-content>
I created a page with 3 tabs using ionic 2.Inside one page I created one button and on click of that button I navigate to a new child page by executing
the push command but whenever I am clicking the tab containing the child page I am not able to see the root page instead I see the new child page.
I want to see the root page on revisit of the tab page.
Below is my code.. here you can check in about.html i have placed one button to navigate to a child page.Navigation is happening but once I navigate then I am not able to see the about tab page without clicking on back button
tabs.html
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>
tabs.ts
import { Component } from '#angular/core';
import { HomePage } from '../home/home';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
#Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
// this tells the tabs component which Pages
// should be each tab's root Page
tab1Root: any = HomePage;
tab2Root: any = AboutPage;
tab3Root: any = ContactPage;
constructor() {
}
}
abuot.html
<ion-header>
<ion-navbar>
<ion-title>
About
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button (click)="navigate()" ion-button color="secondary">GO to LIst</button>
<!-- <button [navPush]="listPage" ion-button color="secondary">Go To About</button> -->
<!-- <button ion-button color="secondary">Secondary</button> -->
</ion-content>
about.ts
import { Component } from '#angular/core';
import {ListPage} from '../list/list';
import {ViewController, NavController} from 'ionic-angular';
#Component({
selector: 'page-about',
templateUrl: 'about.html'
})
export class AboutPage {
constructor(public navCtrl: NavController,public viewctr: ViewController) {
}
navigate(){
this.navCtrl.push(ListPage);
}
}
Just a stab in the dark since we cannot see any of your code (which should be an addition to any question on here). You could try using .setRoot() to get to the root page you're wanting.
import { NavController } from 'ionic-angular';
import { NameOfPage } from '../NameOfPage';
pageYouWant: any = NameOfPage;
constructor(public navctrl: NavController){}
onClickFunction(){
this.navCtrl.setRoot(pageYouWant)
}
ion-tabs and ion-content overlaps ion-header when i load an image in the header, it only happens the first time i'm visiting the page, after that it loads well.
this is the component
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'app/home.page.html'
})
export class HomePage {
public image: string;
appName = 'Ionic App';
constructor(public navController: NavController) { }
ionViewDidLoad(){
this.image = "https://source.unsplash.com/640x300/?technology"
}
}
Here is the html
<ion-header>
<ion-navbar>
<ion-title></ion-title>
</ion-navbar>
<img class="cabecera" [src]="image" width="100%">
</ion-header>
<ion-content padding class="contenido">
Welcome to this <ion-icon name="ionic"></ion-icon> <b>Ionic 2 app</b>.
</ion-content>
Its posible to view an example in this plunker
https://plnkr.co/edit/CpBXmn?p=preview
The problem is that you are only loading the image (in the ionViewDidLoad function) after the rest of the content is loaded. After loading the image you need to resize the content, as described in this issue.
Add ViewChild and Content to your imports from #angular/core and ionic-angular, respectively:
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
Use #ViewChild to select the class for the ion-content component:
// ...
export class HomePage {
#ViewChild(Content) content: Content;
// ...
Then, once the image is loaded, call the resize method on content:
this.content.resize();
I'm struggling with putting a map on a second segment. It's a typical problem, and I've found several solutions, but they don't work for me because the events seem to get fired before the segment is build completely. I don't know if this is because of a breaking change in Ionic, or because I am doing it wrong.
page.html:
<ion-toolbar>
<ion-segment [(ngModel)]="view" (ionChange)="changeSegment()">
<ion-segment-button value="list">
<ion-icon name="list-box" isActive="false"></ion-icon>
</ion-segment-button>
<ion-segment-button value="map" (ionSelect)="selectMap()">
<ion-icon name="map" isActive="false"></ion-icon>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-content [ngSwitch]="view">
<div *ngSwitchCase="'list'"></div>
<div *ngSwitchCase="'map'">
<div id='map'>Here the map comes.</div>
</div>
</ion-content>
page.js:
import {Component} from "#angular/core";
#Component({
templateUrl: 'build/pages/page/page.html'
})
export class Timeline {
constructor() {
this.view = "list";
this.selectMap = function() {
console.log("selectMap:", document.getElementById("map"));
}
this.changeSegment = function() {
console.log("changeSegment:", document.getElementById("map"));
}
}
}
(Yeah, that project is using JavaScript, not TypeScript.)
With both the change and the select events, on first click they return "null" for the map element, and only on a second click they return the correct element.
To me it looks like the events are fired before the segment is complete. (But I may just as well be making a stupid beginners mistake...)
How do I know when the #map element is available?
I've got a vue app in which I'm using the vue-router.
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
let router = new VueRouter()
// Components
import App from './App.vue'
import Mapper from './components/Mapper/mapper.vue'
import ToDos from './components/Todos/ToDoApp.vue'
import Punchlist from './components/Punchlist/punchlist.vue'
// Transitions
Vue.transition('slide',{
enterClass: 'slideInRight',
leaveClass: 'slideOutRight'
})
// Redirects
router.redirect({
'*': 'punchlist'
})
// Mappings
router.map({
'/mapper': {
component: Mapper
},
'/todos': {
component: ToDos
},
'/punchlist': {
component: Punchlist
}
})
router.start(App, '#app')
I have a specific transition registered called slide that I would like to use when navigating between routes. In my App component I added the v-transition and transition-mode directives to the route-view:
<template>
<div class="container">
<h1>Component Gallery</h1>
<p>
<a class='btn btn-primary' v-link="{ path: '/punchlist' }">Punchlist</a>
<a class='btn btn-primary' v-link="{ path: '/todos' }">Todos</a>
<a class='btn btn-primary' v-link="{ path: '/mapper' }">Mapper</a>
</p>
<router-view v-transition="slide" transition-mode="out-in" :google-maps-api-key="googleMapsApiKey"></router-view>
</div>
</template>
When I try to run it, I get the console error:
[Vue warn]: Failed to resolve directive: transition (found in component: )
I've been reading through the docs and looking at examples but I can't figure out why it's erroring out when trying to resolve the binding.
Any ideas?
Transition is an attribute, not a directive. No v-:
<router-view transition="slide">