How to find the count of items in an ngFor after the pipes have been applied

I found the simplest solution to be the following:

1. In your component: add a field that will hold the current count

  filterMetadata = { count: 0 };

2. In your template: add the filterMetadata as a parameter to the filter pipe

  <tr *ngFor="#d of data.results | filter:filterText:filterMetadata | pagination:resultsPerPage:currentPage">

3. interpolate filterMetadata.count into the element that displays the number of records displayed.

  <span> {{filterMetadata.count}} records displayed</span>

4. In the filter pipe, update the filterMetadata.count field when done with filtering

  transform(items, ..., filterMetadata) {
    // filtering
    let filteredItems = filter(items);

    filterMetadata.count = filteredItems.length;
    return filteredItems;
  }

This solution still uses pure pipes, so there are no performance degradations. If you have multiple pipes that do filtering, the filterMetadata should be added as a parameter to all of them because angular stops calling the pipe sequence as soon as the a pipe returns an empty array, so you can't just add it to the first or last filtering pipe.

One way is to use template variables with @ViewChildren()

<tr #myVar *ngFor="let d of data.results | filter:filterText | pagination:resultsPerPage:currentPage">

@ViewChildren('myVar') createdItems;

ngAfterViewInit() {
  console.log(this.createdItems.toArray().length);
}