How to get the size of a filtered (piped) set in angular2

Question

I wrote my own filter pipe as it disappeared in angular2:

import {Pipe, PipeTransform} from \'angular2/core\';

@Pipe({
  name: \'myFilter\'
})
export class          


        

Answer 1

I don't know what you exactly want to do with the size and the Günter's solution can fit your needs.

That said, you can inject the component instance into your pipe and set directly the length into a property of this component.

@Pipe({
  name: 'dump'
})
export class DumpPipe {
  constructor(@Inject(forwardRef(() => AppComponent)) app:AppComponent) {
    this.app = app;
  }

  transform(array: Array<string>, args: string): Array<string> {
    (...)
    this.app.filteredItemLength = array.length;

    return array;
  }
}

@Component({
  (...)
})
export class AppComponent {
  (...)
}

See this answer:

• How to save model manipulation of *ngFor with pipes? - "#item of (result = (items | orderAsc))" doesn't work in A2.

Hope it helps you, Thierry

Answer 2

Gunter answer is in the right direction, it lacks only the info on how to use the result out of the *ngFor loop. One possible solution is to enclose the *ngFor in a wider directive, like the following:

<ng-directive *ngIf='customerData | myFilter:searchTerm as filteredItems'>
   <tr *ngFor="let singleCustomerData of filteredItems">
   ...
   </tr>
   <div>count: {{filteredItems.length}}</div>
</ng-directive>

Credits for this hint go to the following post:

https://netbasal.com/using-pipe-results-in-angular-templates-430683fa2213

Answer 3

You still must call the filter a second time but you can use it directly like this :

{{ (customerData | myFilter:searchTerm)?.length }}

Answer 4

You can simply pass an object from the class component to HTML-pipe as the second argument. And in the class pipe pass the resulting array.

Answer 5

original

AFAIK there is currently no way to do this directly. A hack would be to add a template variable to the content and use a ViewChildren(...) query to get the created items and count them.

<tr *ngFor="let singleCustomerData of customerData | myFilter:searchTerm" #someVar>
  ...
</tr>
<div>count: {{filteredItems?.length}}</div>

@ViewChildren('someVar') filteredItems;

An alternative approach would be to pass a reference to a counter variable to the pipe like shown in https://plnkr.co/edit/Eqjyt4qdnXezyFvCcGAL?p=preview

update (Angular >=4.0.0)

Since Angular 4 *ngFor supports as

<tr *ngFor="let singleCustomerData of customerData | myFilter:searchTerm as result">

which you can use in the template (inside the element that *ngFor is added to) like

  <div>{{result?.length}}</div>