Angular2 *ngFor loop getting height of each loop (Only gets first one)

Question

I have a ngFor loop like so: <div *ngFor="let group of catt" id="juliet" [ngClass]="hf()"> where I call the hf() function each time which looks like so:

hf() {
    this.heighty = document.getElementById('juliet').offsetHeight;
    console.log("juliet function height = " + this.heighty);

  }

But the for loop goes through 4 times for the data, but only gives the height of the first loop, and then gives that same height for each loop their after. When I inspect the elements I see the 4 loops with different heights. I also do not see an identifier for each loop, like juliet[0]. How do I get the heights for each loop of the for loop?

Pankaj Parkar Pankaj Parkar · Accepted Answer · 2017-03-10T09:45:35

Don't use id as it will be repeating that DOM multiple times(though document.getElementById('juliet') will first instance of element) on the page, instead use template variable like #juliet shown below.

<div *ngFor="let group of catt" #juliet [ngClass]="hf(juliet)">

And then calculate height of each DOM by passing juliet in hf method.

hf(element) {
    this.heighty = element.offsetHeight;
   console.log("juliet function height = " + this.heighty);
}

Angular2 *ngFor loop getting height of each loop (Only gets first one)

1 Answers