ionic2 - ionic 2 side-menu filter for an array on page -

im facing problem ionic app. trying filter ionic cards on page side-menu defined (app.html).this school project internship program , appreciate help. page looks this: that page array filtered , this side-menu filter

my code far array page follows,thanks in advance:

import { component } '@angular/core'; import { ionicpage, navcontroller, navparams, menucontroller } 'ionic-angular'; import { locationspage } "../locations/locations"; import { angularfireauth } "angularfire2/auth"; import { toastcontroller } "ionic-angular"; import { restpage } "../rest/rest"; /**  * generated class contentpage page.  *  * see http://ionicframework.com/docs/components/#navigation more info  * on ionic pages , navigation.  */ @ionicpage() @component({   selector: 'page-content',   templateurl: 'content.html', }) export class contentpage {   modifieddata: any;   originaldata: any;     constructor(private toast:toastcontroller,private afauth: angularfireauth,public navctrl: navcontroller, public navparams: navparams, public menuctrl: menucontroller) {         this.navctrl = navctrl;         this.menuctrl = menuctrl;     // this.menuctrl.enable(true, 'mymenu');  //array display of cards  //properties defined cards include:  //name-name of restaurant  //image-image used card  //text-text card  //pushpage-for pushing specific page  //price - defines price of restaurant  // cusisine - defines restaurants cuisine  //page: same pushpage       this.originaldata=[       {name:'fairmont hotel',image:'assets/images/fairmont.jpg',text:'lorem ipsum dummy text of printing , typesetting industry.', pushpage: 'restpage',price: 'low', cuisine:'kenyan',page: restpage},       {name:'marymounthotel',image:'assets/images/fairmont.jpg',text:'lorem ipsum dummy text of printing , typesetting industry.', pushpage: 'restpage',price: 'midrange',cuisine:'ethiopian', page: restpage}     ];     this.modifieddata=json.parse(json.stringify(this.originaldata));   }   //toast message welcome user app   ionviewwillload() {     this.afauth.authstate.subscribe(data =>{       if(data.email && data.uid){         this.toast.create({           message:'welcome rest',           duration: 3000          }).present();       }     })   }    //onclick event  itemselected (pushpage) {   //alert(page);   var page = this.originaldata.filter(function(it) {     return it.pushpage == pushpage   })[0].page   //alert(page);    this.navctrl.push(page);  }  //reset function reset(){   this.modifieddata = json.parse(json.stringify(this.originaldata)); }  //filtering function filter(){ this.modifieddata=this.modifieddata.filter((rest)=> { return rest.cuisine=='kenyan'}); }  //toggel menu function  toggleleftmenu() {    this.menuctrl.toggle('left');  }    togglerightmenu() {   this.menuctrl.toggle('right');  }   //function pushes fab button locationspage locations(){   this.navctrl.push(locationspage); } //function directing rest page contains restaurant details rest(){   this.navctrl.push(restpage); } } 

code side menu follows:

<ion-menu side="left"  [content]="content">   <ion-header id="background">     <ion-avatar item-start>       <img src="">     </ion-avatar>   </ion-header>    <ion-content>     <ion-list>         <button ion-item (click)="openpage(homepage)">         reservations       </button>       <button ion-item (click)="openpage(friendspage)">         settings       </button>      </ion-list>   </ion-content>  </ion-menu>   <!-- second sidemenu -->  <ion-menu side="right"  [content]="content">     <ion-header id="background2">    </ion-header> <ion-content>   <ion-item>     <p>im looking for:</p>     <ion-label stacked>cuisine:</ion-label>    <ion-select [(ngmodel)]="gender">     <ion-option value="k">kenyan</ion-option>     <ion-option value="e">ethiopian</ion-option>     <ion-option value="i">indian</ion-option>     </ion-select>   </ion-item>    <ion-item>     <ion-label stacked>vibe:</ion-label>     <ion-select [(ngmodel)]="vibe">       <ion-option value="c">chilled</ion-option>       <ion-option value="f">formal</ion-option>     </ion-select>   </ion-item>    <ion-item>     <ion-label stacked>price:</ion-label>     <ion-select [(ngmodel)]="price">       <ion-option value="l">low</ion-option>       <ion-option value="m">midrange</ion-option>       <ion-option value="h">highpriced</ion-option>     </ion-select>   </ion-item>    <!-- grid placing buttons -->   <!-- first grid reset button -->   <ion-grid>     <ion-row>       <ion-col col-6>       <button ion-button color="secondary" outline (click)='reset()'>reset</button>       </ion-col>        <!-- second column apply button -->       <ion-col col-6>         <button ion-button color="secondary"  outline (click)='filter(rest)' >apply </button>       </ion-col>     </ion-row>   </ion-grid> </ion-content> </ion-menu>  <!-- disable swipe-to-go-back because it's poor ux combine stgb side menus --> <ion-nav [root]="rootpage" #content ></ion-nav> 

create wrapper object filter f.e. {price: string, vibe: string} keep track of selected filters.

src/models/filter.model.ts

export class filterwrapper {    price: string = "none"; //default value    vibe: string = "none";    cuisine: string = "none"; } 

src/app/app.component.ts

now when filter changes (in app.component.ts) make function like:

import { events } 'ionic-angular'; import { filterwrapper } '../models/filter.model';  @component({...}) export class appcomponent{     filterwrapper: filterwrapper;     constructor(events: events) {         // creates filterwrapper {price: "none", vibe:"none",cuisine:"none"}        this.filterwrapper = new filterwrapper();     }      savefilters() {       this.events.publish('filters:changed', this.filterwrapper);      // this.filterwrapper contains selected filters (ngmodel on select list f.e.)     } } 

src/app/app.component.html

<!-- 1 example provided -->  <ion-select [(ngmodel)]="filterwrapper.cuisine">     <ion-option value="k">kenyan</ion-option>     <ion-option value="e">ethiopian</ion-option>     <ion-option value="i">indian</ion-option>     </ion-select> </ion-item> 

now listen change event in array page:

src/pages/content.component.ts

import { events } 'ionic-angular'; import { filterwrapper } '../models/filter.model';  export class contentpage {      filterwrapper: filterwrapper = new filterwrapper();     allitems = []; // 'all' item list display, filled.       constructor(events: events) {       events.subscribe('filters:changed', filter => {           this.filterwrapper = filter;       }     }      // returns true if item matches selected filters     // yes more efficient more comprehensive.     matchesfilters(item: any) {        let filter = this.filterwrapper;        let result: boolean = false;         // default true in case cuisine "none"        let cuisineresult = true;        if(filter.cuisine != "none") {           cuisineresult = filter.cuisine == item.cuisine;        }         let viberesult = true;        if(filter.vice != "none") {          viberesult = filter.vibe == item.vibe;        }        let priceresult = true;       if(filter.price != "none") {         priceresult = filters.price == item.price;       }        // true if or false if 1 of them false       result = (cuisineresult && viberesult && priceresult);       return result;     } } 

in src/pages/content.component.html page have like:

<ion-item *ngfor="let item of allitems">

now since can't have 2 *'s on 1 item kind of annoying workaround make:

<!-- loop through list , create item of them --> <div *ngfor="let item of allitems">  <!-- dont show item if doesn't match filters -->   <ion-item *ngif="!matchesfilters(item)>    <!-- dont put *ngif on <ion-card> else <ion-item> still created , takes space in page -->    <ion-card>     ....