Thinker
Thinker

Reputation: 5356

Ionic2 navCtrl push do not show pushed page

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.

enter image description here

Am I missing something?

Upvotes: 1

Views: 800

Answers (1)

Thinker
Thinker

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

Related Questions