Get length of array in ngFor after pipes transformation

Question

I have the following template:

<div *ngFor="let item of myArray | customPipe1 | customPipe2; let l = length">
  Here is the length of my ngFor : {{l}}
</div>

Unfortunately length doesn't exist in ngFor. How can I work around this issue to have the length available inside my ngFor?

Minacious

You already have myArray.length I don't understand the issue – Virulence

It depends what you want it for, could you give more context? You can see what's available from ngFor in the docs: angular.io/api/common/NgForOf – Alexandrina

@echonax the length can change by the use of pipes. For instance a filter function :) – Aylmer

@PierreDuc ah thanks, that might be a case. – Virulence

Answer 1

Another solution could be the following

<div *ngFor="let item of myArray | customPipe1 | customPipe2; let l = count">
  Here is the length of my ngFor : {{l}}
</div>

Plunker Example

See also

• https://github.com/angular/angular/blob/master/packages/common/src/directives/ng_for_of.ts#L15-L17

Joejoeann

Nice catch :D github.com/angular/angular/blob/master/packages/common/src/… – Virulence

@echonax Yes, that is:) github.com/angular/angular/blob/master/packages/common/src/… – Joejoeann

How can we write count of the loop? – Additory

Answer 2

<div *ngFor="let item of myArray | customPipe1 | customPipe2 as result">
  Here is the length of my ngFor : {{result.length}}
</div>

See also https://angular.io/api/common/NgForOf

Burrill

Since final Angular 2 version launched, I was expecting this to work and had added answer long back :D here, +1 for link – Seersucker

how can I get the length outside of the ngFor? – Lundquist

@Lundquist {{(myArray | customPipe)?.length}} – Protostele

Thanks @GünterZöchbauer, but I was wondering about solution without need of multiple execution of the pipe. Something like: <div *ngFor="let item of myArray | heavySearchExecution as result"> Here is the length of my ngFor : {{result.length}} </div> <div *ngIf="!result.length"> No results, please do something else... </div> – Lundquist

Do the filtering in code and assign the resulting array to a field and use this field in bindings instead. – Protostele

Answer 3

Well, this is not well documented in the Angular doc, you can find under source code of Angular at -

https://github.com/angular/angular/blob/master/packages/common/src/directives/ng_for_of.ts

*ngFor accepts count params.

constructor(public $implicit: T, public ngForOf: NgIterable<T>, public index: number,public count: number) {
}

So we can get the count like -

<div *ngFor="let item of items | pipe; let l = count">
<div>{{count}}</div>
</div>

Langan

Answer 4

@Günter Zöchbauer {{(myArray | customPipe)?.length}} - Working as Expected

Borer

Answer 5

This might sound dirty (it is)

But const count = document.getElementbyId('id-of-wrapper').childElementCount; will do the trick.

Need to call this function when some thing changes.

Pros

• Not require re calculation of pipe
• Works
• count available outside of loop

Cons

• dirty (a bit)
• not proper angular way
• dependency on dom

Tybi