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

Related searches

I have an ngFor creating rows in a table that is both filtered and paged.

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

There is another element on the page that displays the number of records displayed. These elements are initially bound to the data.Results' length.

How do I get the length of the data that is displayed after the filter pipe has been applied so that I can display it correctly. None of the provided local variables in ngFor seem to account for this.

You can get the count of the items by transforming the array within a pipe.

The idea is that the pipe would transform the array into another array where each element has an item property, and a parent property representing the filtered (or original) array:

@Pipe({ name: 'withParent', pure: false })
export class WithParentPipe implements PipeTransform {
    transform(value: Array<any>, args: any[] = null): any {

        return value.map(t=> {
            return {
                item: t,
                parent: value
            }
        });
    }
} 

Here is how it would be used:

 <tr *ngFor="#d of data.results | 
        filter:filterText |
        pagination:resultsPerPage:currentPage | 
        withParent">
        Count:  {{d.parent.length }}
        Item:  {{ d.item.name}}
 </tr>

How to find the count of items in an ngFor after the pipes have been , You can get the count of the items by transforming the array within a pipe. I found the simplest solution to be the following: In your component: add a field that will hold the current count. You can get the count of the items by transforming the array within a pipe. The idea is that the pipe would transform the array into another array where each element has an item property, and a parent property representing the filtered (or original) array:

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);
}

These elements are initially bound to the data.Results' length. How do I get the length of the data that is displayed after the filter pipe has been applied so that I� You can get the count of the items by transforming the array within a pipe. The idea is that the pipe would transform the array into another array where each element has an item property, and a parent property representing the filtered (or original) array:

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 };
  1. 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">
  1. interpolate filterMetadata.count into the element that displays the number of records displayed.
  <span> {{filterMetadata.count}} records displayed</span>
  1. 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.

find the count of items in an ngFor after the pipes have been applied before slice pipe is it possible to get length before the data get sliced. Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

That is not exactly the purpose of the original question, but I was also looking for a way to display the count of items once that all pipes have been applied. By combining the index and last values provided by ngFor, I found this other solution :

<div *ngFor="#item of (items | filter); #i = index; #last = last">
...
  <div id="counter_id" *ngIf="last">{{index + 1}} results</div>
</div>

How to find the count of items in an ngFor after the pipes have been applied. 发布于 2020-05-03 06:57:32. I have an ngFor creating rows in a table that is both� How to find the count of items in an ngFor after the pipes have been applied. 0. Is async pipe broken in Angular2 beta8 and beta9? 8.

I came across the same problem, although @bixelbits 's answer was approved, but I didn't find it ideal, specially for large data.

Instead of returning the original array in each element, I believe it's better just avoid Pipes for this problem, at least with the current Angular 2 implementation (rc4).

A better solution would be using normal component's function to filter the data, something likes bellow:

// mycomponent.component.ts  
filter() {
  let arr = this.data.filter(
      // just an example
      item => item.toLowerCase().includes(
        // term is a local variable I get it's from <input> 
        this.term.toLowerCase()
      )
    );
  this.filteredLength = arr.length;
  return arr;
}

Then, in the template:

<ul>
  <li *ngFor="let el of filter()"> 
    {{ el | json }}
  </li>
</ul>
// mycomponent.component.html
<p > There are {{ filteredLength }} element(s) in this page</p>

Unless you really want to use Pipes, I would recommend you to avoid them in situations like the above example.

find the count of items in an ngFor after the pipes have been applied None of the provided local variables in ngFor seem to account for this. Angular 4 ngfor multiple arrays *ngFor with multiple arrays, I think you want to show both array from one *ngFor . I can see your data which are having two Arrays: comment and photo . You can achieve it I think you want to show both array from one *ngFor. I can see your data which are having two Arrays: comment and photo.

Changed initialCount to myCount, we are no longer setting an “initialCount”, therefore the count state will be managed in the parent once the child component makes a change to it Created a custom change property to the <counter> template, using () event binding syntax, like we learned when we created our first component this signifies some

Angular 4 search filter pipe example. Angular 4 Filter Search Custom Pipe, So I am trying to build a custom pipe to do a search filter of multiple values in a ngFor loop. I have looked for a number of hours for a good working example, and However, if we still want to filter some results with a search bar, we can create our own filter pipe.

Comments
  • So I had an answer written here but I don't think it will work the way I think it was going to. So I will just put it in a comment and hopefully someone smarter than me can help you! I was thinking you could do something like this here jilles.me/ng-filter-in-angular2-pipes and then watch for an onChange event in your constructor, and then filter data.results and do a count on it whenever filterText changes. You'd essentially filter twice, and that seems really hacky.
  • I am seeing the data in the interpolated Count string, great! How do I get this data back in my component's .ts file to use with other controls? I need to get it outside the scope of the *ngFor.
  • I tried using a solution like this <span>{{setLocalVariable(d.parent.length)}}</span> from here to get the .parent.length elevated out of the ngFor's scope. This approach worked but the setLocalVariable function was called endlessly within the loop even when rendering should have been completed. There didn't appear to be any change detection occuring so I wasn't sure why the ngFor appeared to be executing forever.
  • @ghawkes I don't think that's possible with this approach. I hope angular adds some way to define local template variables based on filtering (similar to index, but custom). And also a way to specify that it be available outside of iteration scope. This would be a very useful feature to take care of some common use cases with ngFor.
  • @pixelbits Hope someone has created a feature request issue on angular github. This is a very much needed feature.
  • this solution won't help if you need to get it inside the component.ts file.
  • This is very close to what I need, thank you. Unfortunately since the paging is lazy-loading the data I always get the .length of the first page only.
  • With this approach you can only get elements that are actually created in the DOM. @pixelbits approach might be a better fit then.
  • also had to use ngAfterViewChecked() { this.cdRef.detectChanges(); }
  • This is the only way I got it working with Angular 8. Very nice and clean solution.
  • in angular 4 the following worked for me: index as i; last as last