bind #element to element created with *ngFor

Question

I am using *ngFor to create a bunch of divs. I would like to get my hands on one of them an get its width.

.html
<div #elReference *ngFor="let el of elements> HEHE </div>

.ts
  @ViewChild("elReference") elReference: ElementRef;

Apparently, you cannot use ViewChild with *ngFor, because elReference remains undefined.

How do you get element reference created with *ngFor?

Take a look at this thread: https://stackoverflow.com/questions/40165294/access-multiple-viewchildren-using-viewchild — Christian Benseler, Oct 31 '17 at 11:18
Thanks. I tried @ViewChildren("elReference") elReferences: QueryList; , but still getting an undefined value for elReferences. — sanjihan, Oct 31 '17 at 11:38
I used it in onInit(). it appears ngAfterViewInit is mandatory. — sanjihan, Oct 31 '17 at 11:45
You have to use ngAfterViewInit because you must wait the template to be parsed and the DOM mounted. — Christian Benseler, Oct 31 '17 at 11:49
Thanks. I am indeed getting the clientWidth now. For some reason, it is rounded to nearest integer. This code console.log(this. elReference.nativeElement.clientWidth); returns 25, although the actual width in browser is 25.11. $("element").outerwidth() also returns 25.11 — sanjihan, Oct 31 '17 at 12:07

score 10 · Accepted Answer · edited Apr 23 '18 at 06:22

10

There is no way to add a template variable selectively, but you can add a marker selectively and then filter by that:

<div #elReference [attr.foo]="el.x == 'foo' ? true : null" *ngFor="let el of elements> HEHE </div>

@ViewChildren("elReference") elReference: QueryList<ElementRef>;

ngAfterViewInit() {
  console.log(this.elReference.toArray()
      .filter(r => r.nativeElement.hasAttribute('foo')));
}

edited Apr 23 '18 at 06:22

Mohammad Kermani

4,713
6
35
55

answered Oct 31 '17 at 11:21

Günter Zöchbauer

558,509
191
1,911
1,506

Danke schön. So far I've always used ViewChild and #elReference inside of onInit(). Why do I need to use ngAfterViewInit in this case? – sanjihan Oct 31 '17 at 11:44
1

If `*ngFor` depends on data passed to `@Input()` it won't be rendered yet. – Günter Zöchbauer Oct 31 '17 at 11:45
1

`toArray()` is not a JavaScript function, and TypeScript returns error as expected – Mohammad Kermani Apr 23 '18 at 06:13
@M98 `toArray()` is a method of `QueryList` created by `@ViewChildren` . I should have been more clear in my answer about that. – Günter Zöchbauer Apr 23 '18 at 06:18
1

Okay, Now with the edit, it makes sense! Thanks a lot – Mohammad Kermani Apr 23 '18 at 06:21
Make sure to indeed use 'true : null'. I used true & false values first, they become strings as attributes thus were always truthy. – Jacob-Jan Mosselman Apr 28 '22 at 09:41

score 4 · Answer 2 · answered Apr 07 '21 at 14:26

There is a more complicated, but more correct way with a directive.

<!-- app.component.html -->
<div *ngFor="let el of elements" [id]="el.id"> HEHE </div>

// div-id.directive.ts
import { Directive, Input, ElementRef } from '@angular/core';

@Directive({
  selector: 'div[id]',
})
export class DivIdDirective {
  @Input() id: number;

  constructor(ref: ElementRef<HTMLDivElement>) {
    this.el = ref.nativeElement;
  }

  el: HTMLDivElement;
}

// app.component.ts
export class AppComponent implements AfterViewInit {
  // ...
  @ViewChildren(DivIdDirective) els: QueryList<DivIdDirective>;

  ngAfterViewInit(): void {
    console.log(this.els.map(({id, el}) => ({id, el}));
  }
}

bind #element to element created with *ngFor

2 Answers2