angular - Two levels of items in an array list in ionic 2 -

i have array list of items:

  items = [     {id: '1', title: 'item 1'},     {id: '2', title: 'item 2'},   ] 

i want add categories list , filter based on that, example

-items -- cat1 --- item 1 --- item 2 -- cat2 --- item 1 --- item 2 -- cat3 --- item 1 --- item 2 

also, how change ngfor code select cat

<ion-list>   <ion-item *ngfor="let item of items" (click)="clicked($event, item)">     <h2>{{item.title}}</h2>   </ion-item> </ion-list>      clicked (event, item){     console.log(item.title);   } 

if want add categories, items array this:

this.items = [   {      id: 1,      title: 'category 1',      items : [                {id: 1, title: 'item 1'},               {id: 2, title: 'item 2'}              ]   },   {      id: 2,      title: 'category 2',      items : [                {id: 3, title: 'item 3'},               {id: 4, title: 'item 4'}              ]   },   {      id: 3,      title: 'category 3',      items : [                {id: 5, title: 'item 5'},               {id: 6, title: 'item 6'}              ]   } ]; 

and can use 2 nested *ngfor print items array this:

  <ion-list  no-lines>     <ion-item *ngfor="let item of items" (click)="clicked($event, item)">       title: {{ item.title }} - id: {{ item.id }}       <p *ngfor="let subitem of item.items" no-lines>         <span>title: {{ subitem.title }} - id: {{ subitem.id }}</span>       </p>     </ion-item>   </ion-list> 

please find full code in working plunker.

---

update:

on opening page how filter category shown? so, i'd push items page , want show's items category.

that achieved using custom pipe. i've updated plunker view looks this:

  <ion-list>     <ion-item>       <button (click)="showcategory(1)">show cat 1</button>       <button (click)="showcategory(2)">show cat 2</button>       <button (click)="showcategory(3)">show cat 3</button>       <button (click)="showcategory(-1)">show all</button>     </ion-item>   </ion-list>   <ion-list  no-lines>     <ion-item *ngfor="let item of (items | categoryfilter:selectedcategoryid)" (click)="clicked($event, item)" >       title: {{ item.title }} - id: {{ item.id }}       <p *ngfor="let subitem of item.items" no-lines>         <span>title: {{ subitem.title }} - id: {{ subitem.id }}</span>       </p>     </ion-item>   </ion-list> 

the buttons in first <ion-item></ion-item>will allow select category want show (by using new property in typescript code private selectedcategoryid : number;, magic being done line of code

*ngfor="let item of (items | categoryfilter:selectedcategoryid)" 

there use custom pipe include in loop categories id matches selectedcategoryid. can see in categoryfilter code:

import { pipe, pipetransform } '@angular/core';  @pipe({ name: 'categoryfilter' }) export class categoryfilter implements pipetransform {     transform(items: any[], selectedid: number): {         if(selectedid === -1)           return items;         return items.filter(item => item.id === selectedid);     } } 

i don't know want accomplish, if don't want show buttons, set selectedcategoryid in constructor of page. again, can find code in this plunker.