How to pick a specific array object in IonicFramework? - ionic-framework

Question

output sample: output
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.
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(){
}
}

Answer 1

First need to identify which page are we directing to, for an example in my case i generate a dummy page which is 'MyAwesomePage' and 'MyAnotherAwesomePage' then in .ts file need to do something like this
{
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});
}
after that, in .html file need to do something like this
<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>

Answer 2

Ok i just understand what do you want to achieve
You must create a page for both Environment Compliace Management and Health & Safety Management using cli below
ionic g page Environment Compliace Management
ionic g page Health & Safety Management
refer to this link for more details,better to read the documentation first.
Add your page to your app.module.ts refer to this tutorial i dont need to explain it
third do something like below
In your html file put some input paramers to your furthermodules function
(click)="furtherModules(content)
In your ts file do something like below
furtherModules(type:any){
if('Environment Compliace Management'){
this.navCtrl.push(*name of your page to environment compliace management*)
}
else{
this.navCtrl.push(*name of your page to Health & Safety Management*)
}
}