Ionic 2 push to a different page on each list element button

Question

I am kind of new to Ionic 2 platform and angular 2 as well.

I already have listed card elements that display names which is pulled from an array and each card has the same buttons but all cards must go to their specific page.

I looked on the web but couldn't see anything about this so here I am asking it to you guys :)

This is calcs.ts

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { AuthHttp } from 'angular2-jwt';
import { AuthService } from '../../services/auth/auth.service';
import { NavController } from 'ionic-angular';
import { Calc1 } from '../calculators/calc1/calc1';
import { Calc2 } from '../calculators/calc2/calc2';
import { Calc3 } from '../calculators/calc3/calc3';
import { Calc4 } from '../calculators/calc4/calc4';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';

@Component({
    templateUrl: 'calcs.html',

})

export class Calculators {
    items: any;

    constructor(public nav: NavController, private http: Http, private authHttp: AuthHttp, public auth: AuthService) {

        this.initializeItems();

    }

    initializeItems() {
        this.items = [
            { CalcPage: Calc1, CalcName: 'Automobile Expense Calculator' },
            { CalcPage: Calc2, CalcName: 'Some Other Calculator' },
            { CalcPage: Calc3, CalcName: 'Another Calculator' },
            { CalcPage: Calc4, CalcName: 'One Last Calculator' }
        ]
    }

    getItems(ev) {
        // Reset items back to all of the items
        this.initializeItems();

        // set val to the value of the searchbar
        let val = ev.target.value;

        // if the value is an empty string don't filter the items
        if (val && val.trim() != '') {
            this.items = this.items.filter((item) => {
                return (item.CalcName.toLowerCase().indexOf(val.toLowerCase()) > -1);
            })
        }
    }
}

and this is calcs.html

<ion-header>
  <ion-navbar color="dark">
    <ion-title text-center>Calculators</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>

  <ion-card *ngFor="let item of items" >
    <ion-card-content>
      <h2>
        {{item.CalcName}}
      </h2>
    </ion-card-content>
    <ion-row no-padding>
      <ion-col>
        <button ion-button clear small icon-left color="dark">
          <ion-icon name='calculator'></ion-icon>
          calculate
        </button>
      </ion-col>
      <ion-col text-right>
        <button ion-button clear small color="danger" icon-left>
          <ion-icon name='heart-outline'></ion-icon>
          favourite
        </button>
      </ion-col>
    </ion-row>
  </ion-card>

</ion-content>

One thing to consider is that in calcs.ts:

initializeItems() {
    this.items = [
        { CalcPage: Calc1, CalcName: 'Automobile Expense Calculator' },
        { CalcPage: Calc2, CalcName: 'Some Other Calculator' },
        { CalcPage: Calc3, CalcName: 'Another Calculator' },
        { CalcPage: Calc4, CalcName: 'One Last Calculator' }
    ]
}

CalcPage: Calc1
CalcPage: Calc2
CalcPage: Calc3
CalcPage: Calc4

Those are the actual page names as registered in app.component

Answer 1

You're pretty close... just modify the html code to handle the click event like this:

<button (click)="openPage(item)" ion-button clear small icon-left color="dark">
    <ion-icon name='calculator'></ion-icon>
    calculate
</button>

And then add the openPage method in your component's code:

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { AuthHttp } from 'angular2-jwt';
import { AuthService } from '../../services/auth/auth.service';
import { NavController } from 'ionic-angular';
import { Calc1 } from '../calculators/calc1/calc1';
import { Calc2 } from '../calculators/calc2/calc2';
import { Calc3 } from '../calculators/calc3/calc3';
import { Calc4 } from '../calculators/calc4/calc4';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';

@Component({
    templateUrl: 'calcs.html',

})

export class Calculators {
    items: any;

    constructor(public nav: NavController, private http: Http, private authHttp: AuthHttp, public auth: AuthService) {
        this.initializeItems();
    }

    initializeItems() {
        this.items = [
            { CalcPage: Calc1, CalcName: 'Automobile Expense Calculator' },
            { CalcPage: Calc2, CalcName: 'Some Other Calculator' },
            { CalcPage: Calc3, CalcName: 'Another Calculator' },
            { CalcPage: Calc4, CalcName: 'One Last Calculator' }
        ]
    }

    getItems(ev) {
        // Reset items back to all of the items
        this.initializeItems();

        // set val to the value of the searchbar
        let val = ev.target.value;

        // if the value is an empty string don't filter the items
        if (val && val.trim() != '') {
            this.items = this.items.filter((item) => {
                return (item.CalcName.toLowerCase().indexOf(val.toLowerCase()) > -1);
            })
        }
    }

    public openPage(item: any): void {
        this.nav.push(item.CalcPage);
    }
}