Using ElementRef with async pipe

Question

In my html i have async pipe and ElementReference. In ts iam setting data comes with async pipe to nativeElement.innerHTML but iam getting this on console.

Cannot read properties of undefined (reading 'nativeElement')

Html

<div *ngIf="(article$ | async) as article">

    <div #articleBody>
    </div>

</div>

Ts

@ViewChild("articleBody") articleBody: ElementRef;

ngAfterViewInit() {
    this.article$ = this.articleService.article$.pipe(
      tap(x => {
        this.articleBody.nativeElement.innerHTML = x.body
      })
    )
  }

How can i solve this ?

Does this answer your question? [Angular 2 @ViewChild annotation returns undefined](https://stackoverflow.com/questions/34947154/angular-2-viewchild-annotation-returns-undefined) — Carcigenicate, Feb 12 '23 at 01:01
`ViewChild` doesn't work well when the element is inside a conditional `ngIf` block. The linked post gives alternate suggestions. — Carcigenicate, Feb 12 '23 at 01:02
a couple of answers here https://stackoverflow.com/questions/39366981/viewchild-in-ngif — Train, Feb 12 '23 at 02:13
Have you tried adding a set timeout? Around the reference to give time for the dom to draw? — Judson Terrell, Feb 12 '23 at 05:15

score 0 · Answer 1 · answered Feb 12 '23 at 07:40

You need to handle this with run change detector manually. Angular will init ViewChild on ngAfterInit but you init the data in it, too. So try this

…

constructor(private changeDetector: ChangeDetectorRef) {}

ngAfterViewInit() {
    this.article$ = this.articleService.article$.pipe(
      tap(x => {
        this.changeDetector.detectChanges();
        this.articleBody.nativeElement.innerHTML = x.body
      })
    )
  }

This force Angular to check all changes. Then your ViewChild is available.

This does not solve problem but setTimeout works. – wostory Feb 12 '23 at 18:19 — wostory, Feb 12 '23 at 18:19

score 0 · Answer 2 · answered Feb 12 '23 at 20:46

A cleaner solution than the timeout would be relying on ViewChildren and subscribing to its changes.

Something like :

@ViewChildren('articleBody', {read: ElementRef}) el: QueryList<ElementRef>;

/**
 * Listen within this component
 */
private listenForPlotChanges() {
    this.el.changes.subscribe(
        (next: QueryList<ElementRef>) => {
            // check the length if the elements has been rendered. 
         }
    );
}

score 0 · Answer 3 · answered Feb 15 '23 at 03:01

0

As I mentioned just use a setTimeout around your function. This is used very commonly to avoid these types of issues.

cont t = setTimeout(()=>{
//do something
clearTimeout(t) // avoid memory leak
},1)

answered Feb 15 '23 at 03:01

Judson Terrell

4,204
2
29
45

Using ElementRef with async pipe

3 Answers3