How to use multiple checkboxes to filter data in Angular 2

Question

How to use multiple checkboxes to filter data in Angular 2

I am creating a filter page with Angular 2. Data is filtered depending on the checkboxes selected.

This is HTML

<input required type="checkbox" name="checkbox" value="value1" (change)="toggleFilter(kind.value)" #kind/> Filter option 1 <input required type="checkbox" name="checkbox" value="value2" (change)="toggleFilter(kind2.value)" #kind2 /> Filter option 2 <input required type="checkbox" name="checkbox" value="value3" (change)="toggleFilter(kind3.value)" #kind3 /> Filter option 3 <div *ngFor="let item of (items | FilterPipe: filterFormat)"> {{item.id}} {{item-title}} </div>

This is part of my Item component. In the toggleFilter() I find an array of filterOptions with the values of this flag. get filterFormat() returns a populated array and puts it as an argument in Filterpipe (which is in HTML)

 filterOptions: [] = []; toggleFilter(value: any) { let index = this.filterOptions.indexOf(value); if (index > -1) { this.filterOptions.splice(index, 1); } else { this.filterOptions.push(value); } return this.filterOptions; } get filterFormat() { console.log('call filterFormat'); return this.filterOptions.map(res => res); }