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?

You already have `myArray.length` I don't understand the issue — eko, Jun 13 '17 at 12:16
It depends what you want it for, could you give more context? You can see what's available from `ngFor` in the docs: https://angular.io/api/common/NgForOf — jonrsharpe, Jun 13 '17 at 12:16
@echonax the length can change by the use of pipes. For instance a filter function :) — Poul Kruijt, Jun 13 '17 at 12:20

yurzui · Accepted Answer · 2017-06-22T11:07:35.830

29

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>

See also

edited Jun 22 '17 at 11:07

answered Jun 13 '17 at 14:11

yurzui

Nice catch :D https://github.com/angular/angular/blob/master/packages/common/src/directives/ng_for_of.ts#L21 – eko Jun 13 '17 at 14:22
1

@echonax Yes, that is:) https://github.com/angular/angular/blob/master/packages/common/src/directives/ng_for_of.ts#L17 – yurzui Jun 13 '17 at 14:22
How can we write count of the loop? – Dhirendra Kumar Jan 16 '19 at 08:41

Günter Zöchbauer · Answer 2 · 2017-06-13T13:58:32.073

16

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

edited Jun 13 '17 at 13:58

answered Jun 13 '17 at 12:17

1

Since final Angular 2 version launched, I was expecting this to work and had added answer long back :D [here](https://stackoverflow.com/a/39476552/2435473), +1 for link – Pankaj Parkar Jun 13 '17 at 13:41
7

how can I get the length outside of the ngFor? – Luckylooke Aug 15 '17 at 10:32
4

@Luckylooke `{{(myArray | customPipe)?.length}}` – Günter Zöchbauer Aug 15 '17 at 12:31
1

Thanks @GünterZöchbauer, but I was wondering about solution without need of multiple execution of the pipe. Something like: ```
Here is the length of my ngFor : {{result.length}}

No results, please do something else...
``` – Luckylooke Aug 15 '17 at 12:39
1

Do the filtering in code and assign the resulting array to a field and use this field in bindings instead. – Günter Zöchbauer Aug 15 '17 at 12:45

Kanchan · Answer 3 · 2017-06-16T12:50:30.843

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

*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>

score 0 · Answer 4 · answered Dec 23 '20 at 17:19

0

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

answered Dec 23 '20 at 17:19

Praburam S

score 0 · Answer 5 · answered Jun 30 '21 at 14:48

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

Cons

5 Answers5