A page with a list of other pages

Question

I would like to know how I do, for example, page that will list the other pages:APP,SITE,etc:

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';


/*navParams receive params one page for other page  */
@Component({
  selector: 'page-list',
  templateUrl: 'list.html'
})
export class ListPage {
  selectedItem: any;
  icons: string[];
  items: Array<{title: string, note: string, icon: string}>;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    // If we navigated to this page, we will have an item available as a nav param
    this.selectedItem = navParams.get('item');

    // Let's populate this page with some filler content for funzies
    this.icons = ['flask', 'wifi', 'beer', 'football', 'basketball', 'paper-plane',
    'american-football', 'boat', 'bluetooth', 'build'];

    this.items = [];
    for (let i = 1; i < 11; i++) {
      this.items.push({
        title: 'Item ' + i,
        note: 'This is item #' + i,
        icon: this.icons[Math.floor(Math.random() * this.icons.length)]
      });
    }
  }

  itemTapped(event, item) {
    // That's right, we're pushing to ourselves!
    this.navCtrl.push(ListPage, {
      item: item
    });
  }
}

-------------------Html---------------------------------------------- Our products

<ion-content>
  <ion-list>
    <button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
      <ion-icon [name]="item.icon" item-start></ion-icon>
      {{item.title}}
      <div class="item-note" item-end>
        {{item.note}}
      </div>
    </button>
  </ion-list>
  <div *ngIf="selectedItem" padding>
    You navigated here from <b>{{selectedItem.title}}</b>
  </div>
</ion-content>

This code above is the default of the sidemenu template.

What I want to do is that this item array contains the pages: APP, Site, etc, then the person clicks on for example, APP, goes to it.

It would be something like :

items = [
      { title: 'Aplicativo', component: AppPage},

      { title: 'Site', component: SitePage},
    ];

  itemSelected(page) 
  {
    this.navCtrl.push(page.component);
  }
}

Can someone give me a hand? Thank you

Answer 1

itemTapped(event, item) {
    this.navCtrl.push(ListPage, {
      item: item
    });
  }
  
  /// OUUU
  
  /*
  itemTapped(event, item) {
    this.navCtrl.push(item);
  }
  */

<ion-content>
  <ion-list>
    <button ion-item *ngFor="let item of items" (click)="itemTapped($event, item.component)">
      <ion-icon [name]="item.icon" item-start></ion-icon>
      {{item.title}}
      <div class="item-note" item-end>
        {{item.note}}
      </div>
    </button>
  </ion-list>
  <div *ngIf="selectedItem" padding>
    You navigated here from <b>{{selectedItem.title}}</b>
  </div>
</ion-content>

You are passing the entire object (item) in the itemTapped function, but you are not referencing the 'Component' attribute of this object when making navCtrl.push(). I had to make the change in HTML, passing the.Component item as the second parameter of the itemTapped function.