Angular 2 checkbox filtering

i want to filter multiple checkboxes with Angular 2 and achieve something like THIS .
The problem is that the app is not working when i check 2 different checkboxes.

App.Component.html

    <div  *ngFor="let s of cpuName">
      <input  type="checkbox" [(ngModel)]="s.checked" (click)="updateFilter(s)"  >
    </div>

    <div  *ngFor="let n of cpuCode">
      <input  type="checkbox" [(ngModel)]="n.checked" (click)="updateFilter(n)"  >
    </div>

  <ul>
      <div *ngFor="let a of allCpu | filterPipe: filterArr">
          ID: , Name: , Code: 
      </div>
  </ul>

App.Component.ts

export class AppComponent {
  filterArr = [];
  cpuName = [{checked:false,name:'Intel'},{checked:false,name:'AMD'}]
  cpuCode =[{checked:false,name:'i5'},{checked:false,name:'i7'},{checked:false,name:'ryzen7'}]
  name:string;

  allCpu = [
    {id:1, name:'Intel', code:'i5'},
    {id:2, name:'Intel', code:'i5'},
    {id:3, name:'AMD', code:'ryzen7'},
    {id:4, name:'Intel', code:'i7'},
    {id:5, name:'AMD', code:'ryzen7'},
    {id:6, name:'Intel', code:'i7'}
  ]


  updateFilter(option) {
    if(!option.checked) {
      this.filterArr.push(option.name);
      console.log(this.filterArr);
    }
    else {
      let index = this.filterArr.indexOf(option.name);
      this.filterArr.splice(index, 1);
    }
  }
}

Pipe.ts

@Pipe({
    name: 'filterPipe',
    pure: false
})
export class FilterPipe implements PipeTransform {
    transform(value: any, args?: any[]): any {
        return  value.filter(item => {
            return args.length ? args.indexOf(item.name) != -1 : value;
        })
    }
}

This is the Final Output