title: How to pick a specific array object in IonicFramework?
body: <p>output sample: <a href="https://i.stack.imgur.com/kETay.png" rel="nofollow noreferrer">output</a> </p>
  
  <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>home.html code:
  
  &lt;ion-content class="outer-content"&gt;
    &lt;ion-card&gt;
      &lt;ion-card-header&gt;
        {{content}}
      &lt;/ion-card-header&gt;
      &lt;ion-card-content&gt;
        &lt;ion-segment [(ngModel)]="content" color="dark"&gt;
          &lt;ion-segment-button value="Environment Compliace Management"&gt;
            &lt;ion-icon name="flask"&gt;&lt;/ion-icon&gt;
          &lt;/ion-segment-button&gt;
          &lt;ion-segment-button value="Health &amp; Safety Management"&gt;
            &lt;ion-icon name="medkit"&gt;&lt;/ion-icon&gt;
          &lt;/ion-segment-button&gt;
        &lt;/ion-segment&gt;
        &lt;ion-list style="margin: 0" inset&gt;
          &lt;button ion-item *ngFor="let sContent of getContentItems(content)" (click)="furtherModules()"&gt;
            &lt;ion-icon item-start [name]="sContent.icon" color= "primary"&gt;&lt;/ion-icon&gt;
            {{sContent.name}}
          &lt;/button&gt;
        &lt;/ion-list&gt;
      &lt;/ion-card-content&gt;
    &lt;/ion-card&gt;
  &lt;/ion-content&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 &amp; 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(){
    }
  }</code></pre>
  </div>
  </div>
  </p>