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

Question

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

Answer 1

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, args: any[] = null): any {

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

Here is how it would be used:

 
        Count:  {{d.parent.length }}
        Item:  {{ d.item.name}}