Pass page parameter from view to controller

Question

I am quite new to ionic and I am quite lost at this point:

I have the following html:

<ion-menu [content]="mainContent">
  <ion-header>
    <ion-toolbar>
      <ion-title>
        Menu
      </ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content id="side-menu21">
    <ion-list id="menu-list1">
      <ion-item color="none" id="menu-list-item1" (click)="gotoTabPending();">
        Pendientes
      </ion-item>
      <ion-item color="none" id="menu-list-item2" (click)="gotoTabDone();">
        Realizadas
      </ion-item>
      <ion-item color="none" id="menu-list-item3" (click)="gotoTabAll();">
        Todas
      </ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-nav #mainContent [root]="rootPage"></ion-nav>

Which call these three methods:

gotoTabPending(){
    this.navCtrl.push(PendingTasksPage);
    this.menuCtrl.close();
}

gotoTabDone(){
    this.navCtrl.push(DoneTasksPage);
    this.menuCtrl.close();
}

gotoTabAll(){
    this.navCtrl.push(AllTasksPage);
    this.menuCtrl.close();
}

And I am trying to unify these methods in one, something like:

<ion-item color="none" id="menu-list-item3" (click)="gotoTab(AllTasksPage);">

gotoTab(param){
  this.navCtrl.push(param);
  this.menuCtrl.close();
}

However, this ain't working and launch the exception:

I have been doing some research but I did not find anything usefull. Is there any way to do this?

Thanks in advance

Answer 1

You can do this...

export interface PageInterface {
  title: string;
  name: string;
  index?: any;
}

appPages: PageInterface[] = [
    { title: 'Pendientes', name: PendingTasksPage, index: 0 },
    { title: 'Realizadas', name: DoneTasksPage, index: 1 },
    { title: 'Todas', name: AllTasksPage, index: 2 },
];

gotoTab(x){
    this.navCtrl.push(x.name);
    this.menuCtrl.close();
}

<ion-menu [content]="mainContent">
  <ion-header>
    <ion-toolbar>
      <ion-title>
        Menu
      </ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content id="side-menu21">
    <ion-list id="menu-list1">
      <ion-item *ngFor="let x of appPages" color="none" id="menu-list-item1" (click)="gotoTab(x);">
        {{x.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-nav #mainContent [root]="rootPage"></ion-nav>