I’m using ionic with sidebars.
In sidebar I have a menu with categories.
In home page I list a lot of items.
So, I want to filter the items listed in home. for this I created an filter pipe to use with ngfor. In filter pipe It accepts an array with the specific key / value.
So, in app.html I list the categories like this:
<ion-content> <ion-item-group> <ion-item-divider light>Filter</ion-item-divider> <ion-item-divider light>Categories</ion-item-divider> <ion-item *ngFor="#cat of categories" (click)="filter('categories', cat.id)">{{cat.name}}</ion-item> </ion-item-group> </ion-content>
In app.js, I have the function ‘filter’ which send to HomePage an array with categories (when the user clicks on it):
this.filters = []; filter(key, value){ this.filters[key] = value; HomePage.prototype.setFilters(this.filters); }
In home.js I read the filters updated from app.js
setFilters(filter) { this.filters = filter; console.log(filters); // logs all filters applied from app.js, when clicking on a category. E.g: [categorie: 4] }
In home.html, I try to print the filters that I have applied, also run ngFor with the filters I used:
`
Filters:
{{filters}}
<ion-card *ngFor="#zuera of zueras | filter: filters">
{{zuera}}
`
The problem is: When I click in some categories on the sidemenu, the variable ‘filters’ read in HomePage, get updated in my component, but it doesn’t get updated in view.
So my question is: How can I update the view value in HomePage from app.js?
Or, there’s in better way for me to create this filter?