Ionic2: send data to subpages and sub-subpages

supply-second.html

<ion-header>
  <ion-navbar>
    <ion-title *ngIf="selectedVarud">
      {{selectedVarud.title}}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-list-header class="list-header-margin">Jook</ion-list-header>
    <ion-item *ngFor="let supply of supplies | slice:0:1;">
      <ion-label>{{supply.title}}</ion-label>
      <ion-checkbox color="check" checked="false"></ion-checkbox>
      <img item-right (click)="varudTapped($event, supply)" src="../../assets/instructions/ico-veeohutus-small.png" class="icon-size">
    </ion-item>
  </ion-list>
  <ion-list>
    <ion-list-header class="list-header-margin">Toit</ion-list-header>
    <ion-item *ngFor="let supply of supplies | slice:1:6;">
      <ion-label>{{supply.title}}</ion-label>
      <ion-checkbox color="check" checked="false"></ion-checkbox>
      <img item-right (click)="varudTapped($event, supply)" src="../../assets/instructions/ico-veeohutus-small.png" class="icon-size">
    </ion-item>
  </ion-list>
  <ion-list>
    <ion-list-header class="list-header-margin">Tervis</ion-list-header>
    <ion-item *ngFor="let supply of supplies | slice:6:7;">
      <ion-label>{{supply.title}}</ion-label>
      <ion-checkbox color="check" checked="false"></ion-checkbox>
      <img item-right (click)="varudTapped($event, supply)" src="../../assets/instructions/ico-veeohutus-small.png" class="icon-size">
    </ion-item>
  </ion-list>
  <ion-list>
    <ion-list-header class="list-header-margin">Tehnika</ion-list-header>
    <ion-item *ngFor="let supply of supplies | slice:7:15;">
      <ion-label>{{supply.title}}</ion-label>
      <ion-checkbox color="check" checked="false"></ion-checkbox>
      <img item-right (click)="varudTapped($event, supply)" src="../../assets/instructions/ico-veeohutus-small.png" class="icon-size">
    </ion-item>
  </ion-list>

</ion-content>

supply-second.ts

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


@Component({
  selector: 'page-supply-second',
  templateUrl: 'supply-second.html'
})
export class SupplySecondPage {

  selectedVarud: any; //from previous page
  supplies: any; //current things
  supplyTitle: any;

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

    this.supplies = [
      {title: 'Joogivesi (21 liitrit)'},
      {title: 'Erinevaid konserve (2,5 kg)'},
      {title: 'Pakisupid, püreed, helbed'},
      {title: 'Valmis purgiroad'},
      {title: 'Teraviljatooted'},
      {title: 'Süsivesikuterikkad tooted'},
      {title: 'Esmaabitarbed ja olulised ravimid'},
      {title: 'Taskulamp ja patareid'},
      {title: 'Patareidega raadio ja varupatareid'},
      {title: 'Teraviljatooted'},
      {title: 'Süsivesikuterikkad tooted'},
      {title: 'Joovivesi (21 liitrit)'}
    ];
  }

  varudTapped(event, supply) {
    this.navCtrl.push(SupplyThirdPage, {
      supply: supply,
      supplyTitle: this.selectedVarud.title
    });
  }
}

supply-third.html

<ion-header>
  <ion-navbar>
    <ion-title>{{supplyTitle}}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <h2>{{selectedVaruInfo.title}}</h2>
  <p>Organismi veevajadus on 28–35 ml kehakaalu kilogrammi kohta, so umbes 3 liitrit ööpäevas.</p>
</ion-content>

supply-third.ts

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

@Component({
  selector: 'page-supply-third',
  templateUrl: 'supply-third.html'
})
export class SupplyThirdPage {

  selectedVaruInfo: any; //from previous page
  supplies: any; //current things
  supplyTitle: any;

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

supply.html

<ion-content>
  <ion-list>
    <button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
      <img src="../../assets/instructions/ico-{{item.icon}}-small.png" item-left class="icon-size">
      {{item.title}}
    </button>
  </ion-list>
</ion-content>

supply.ts

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

@Component({
  selector: 'page-supply',
  templateUrl: 'supply.html'
})
export class SupplyPage {

  items: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {

    this.items = [
      {title: '7 päeva kodused varud', icon: 'esmaabi'},
      {title: 'Evakuatsioonivarud', icon: 'tuleohutus'},
      {title: 'Meditsiinivarud', icon: 'veeohutus'},
      {title: 'Lemmikloomale', icon: 'looduskeskkond'},
      {title: 'Lastele', icon: 'loodusonnetus'}
    ];

  }
  itemTapped(event, item) {
    this.navCtrl.push(SupplySecondPage, {
      item: item
    });
  }
}