CODEWITHSUNDEEP
angularangular2-pipe
Scipion
Scipion

Reputation: 11888

Get length of array in ngFor after pipes transformation

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?

Upvotes: 16

Views: 44578

Answers (5)

Akshay
Akshay

Reputation: 3866

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

Upvotes: 0

Praburam S
Praburam S

Reputation: 165

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

Upvotes: 0

yurzui
yurzui

Reputation: 214175

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

Upvotes: 31

Kanchan
Kanchan

Reputation: 1619

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>

Upvotes: 1

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657781

<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

Upvotes: 16

Related Questions