Reputation: 5356
I am trying to push a page (i.e. VideoPage) from my ExerciseListPage component.
My ExerciseListPage template:
<button ion-item [hidden]="!isGroupShown(day)" *ngFor="let exercise of day.exercises" (click)="goTo(exercise.id)">
{{exercise.name}}
</button>
Component:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ExerciseListFactory } from './exercise_plan';
import { VideoPage } from '../video/video';
@Component({
selector: 'page-list',
templateUrl: 'exercise_list.html',
providers:[ExerciseListFactory]
})
export class ExerciseListPage {
public days : any[];
public shownGroup;
constructor(public navCtrl: NavController, public exerciseFactory: ExerciseListFactory) {
this.navCtrl=navCtrl;
this.days=this.exerciseFactory.getall();
}
goTo(exerciseId: any){
this.navCtrl.push(VideoPage, {
exerciseId: exerciseId
});
}
}
Video component:
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
@Component({
selector: 'video',
templateUrl: 'video.html',
})
export class VideoPage {
public test: string;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.navCtrl=navCtrl;
this.test="Test video";
console.log(this.navParams.get('exerciseId'));
}
}
And video template:
<ion-header>
<ion-navbar>
<ion-title>
Video
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h5>{{test}}</h5>
</ion-content>
In my app.module:
@NgModule({
declarations: [
MyApp,
VideoPage,
ExerciseListPage,
AnalyticsPage,
HomePage,
TabsPage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
VideoPage,
ExerciseListPage,
AnalyticsPage,
HomePage,
TabsPage
],
providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}
and tabs.html:
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="Exercises" tabIcon="body"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Analytics" tabIcon="analytics"></ion-tab>
</ion-tabs>
The console statement in my video component prints id in my console however nothing is shown on display.
Am I missing something?
Upvotes: 1
Views: 800
Reputation: 5356
In my video component an extra comma was present :
@Component({
selector: 'video',
templateUrl: 'video.html',
})
After removing comma after templateUrl, the template was shown
Upvotes: 2