How do you target the visible items in an ngFor list

I have a table of data. Each row has a checkbox that can be selected for a bulk operation on that row. The table can be filtered by various filter mechanisms which are applied to the ngFor using a custom pipe. There is a header row with a checkbox to select all. Currently if I click that it selects all items in the table irrespective of the filter. I would like to be able to target only the visible items.

I have a "hack" in the checkAll() handler where I iterate over the full list and reapply the filters but was hoping for a more elegant / integrated solution.

In my view

<table>
   <tr>
     <th><input type="checkbox" [(ngModel)]="allCheck" (click)="selectAll()"></th>
     <th>Name</th>
   </tr>
   <tr *ngFor="let client of clients|filterTable:searchString:incomplete">
     <td><td><input type="checkbox" [(ngModel)]="clientCheck[store.id]"></td>
     <td><input [(ngModel)]="client.Name"></td>
</table>

In my pipe (incomplete is a filter for records where Name is blank - we want to filter by those and then select only those).

transform(items: any[], searchString:string, showIncomplete:boolean): any {
  if (!items) return [];
  if (!showIncomplete && !searchString) return items;
  searchString = searchString.toLowerCase();
  return items.filter(value => {
    if (showIncomplete && value.Name) return false;
    return value.Name.toLowerCase().indexOf(searchString);
  })
}

In my controller

ngOnInit() {
   // assume svc is the injected clientService
   this.svc.getClients()
    .subscribe(clients => this.clients = clients);
}

selectAll() {
   // Is there a way to get access to the list of items here
   // that are actually being displayed?
}

0 Answers