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 MyFilter implements PipeTransform {
  transform(customerData: Array<Object>, args: any[]) {
    if (customerData == undefined) {
      return;
    }
    var re = new RegExp(args[0]);
    return customerData.filter((item) => re.test(item.customerId));
  }
}

And use it in my template:

<tr *ngFor="#singleCustomerData of customerData | myFilter:searchTerm">
  ...
</tr>

Now I'd like to see how many matches the pipe returns. So essentially the size of the returned array.

In angular 1.x we were able so assign the returned set to a variable in a template like so:

<div ng-repeat="person in filtered = (data | filter: query)">
</div>

But we can no longer assign variables in templates in angular2.

So how do I get the size of the filtered set without calling the filter twice?

Solution 1

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>

Solution 2

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

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

Solution 3

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

Solution 4

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

View more solutions

Comments

[Jay Dharmendra Solanki]

In the angular>=4 section, do you know how can we use it outside the *ngFor block? In my case I have to use that number in another logic.

[Günter Zöchbauer]

I don't think there is a way to do this in the template. You'll need to run the filter in the components code and assign the length to a field to make it available in the template.

[Salman Kazmi]

@GünterZöchbauer can I somehow access this filteredItems list in my component?

[Günter Zöchbauer]

@SalmanKazmi no, there is no way. Filter it in the component instead and make it available to the template.

[Gandalf the White]

This answer worked for me, the accepted one retained value of previous instance.