How to pick a specific array object in IonicFramework?

Ionic Framework
1 
home.html code:

<ion-content class="outer-content">
  <ion-card>
    <ion-card-header>
      {{content}}
    </ion-card-header>
    <ion-card-content>
      <ion-segment [(ngModel)]="content" color="dark">
        <ion-segment-button value="Environment Compliace Management">
          <ion-icon name="flask"></ion-icon>
        </ion-segment-button>
        <ion-segment-button value="Health & Safety Management">
          <ion-icon name="medkit"></ion-icon>
        </ion-segment-button>
      </ion-segment>
      <ion-list style="margin: 0" inset>
        <button ion-item *ngFor="let sContent of getContentItems(content)" (click)="furtherModules()">
          <ion-icon item-start [name]="sContent.icon" color= "primary"></ion-icon>
          {{sContent.name}}
        </button>
      </ion-list>
    </ion-card-content>
  </ion-card>
</ion-content>

home.ts code:

import {Component} from '@angular/core';
import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular';
import {ModuleListPage} from '../module-list/module-list';
import { identifierName } from '@angular/compiler';

@Component({
  templateUrl: 'home.html'
})
export class HomePage{
  content="MODULES";
  constructor(public navCtrl: NavController, public navParams: NavParams) {}


  items: any = {
    'Environmental Compliance Management': [
      {
        name: 'Chemical Management',
        icon: 'nuclear',
      },

      {
        name: 'PPE Management',
        icon: 'man'
      }
    ],
    'Health & Safety Management': [
      {
        name: 'Emergency Incident Management',
        icon: 'alert'
      },
      {
        name: 'Machinery Management',
        icon: 'construct'
      },
      {
        name: 'Risk Management',
        icon: 'cog'
      }
    ]
  };
  getContentItems(type:any){
    return this.items[type];
  }
  furtherModules(){
  }
}

In the furtherModules function, under the main module Environmental Compliance Management there is two sub modules which is Chemical Management and PPE Management, so when the user click Chemical Management it should go to a new page and when the user click PPE Management it should go to another page.I don’t know how to do that. I really need help on this.

2

You have to, some way, identify wich page do you want to go. Try something like this:

ts file

{
  name: 'Chemical Management',
  icon: 'nuclear',
  goTo: 'MyAwesomePage'
},

{
  name: 'PPE Management',
  icon: 'man',
  goTo: 'MyAnotherAwesomePage'
}


public furtherModules(sContent:any): void{
 // Validate here if sContent.goTo is a valid page
 this.navCtrl.push(sContent.goTo, {_sContent: sContent});
}

html file

<ion-list style="margin: 0" inset>
    <button ion-item *ngFor="let sContent of getContentItems(content)" (click)="furtherModules(sContent)">
       <ion-icon item-start [name]="sContent.icon" color= "primary"></ion-icon>
          {{sContent.name}}
    </button>
</ion-list>
1 Like
3

Thank you so much. It works :):smile: