ElementRef for ViewChild of ancestor undefined

Question

I'm trying to get the dimensions of a distant ancestor of a clicked element (to determine where the popup should go) and I'm having some trouble. The ElementRef I'm defining comes out as undefined.

The ancestor element:

<div class="tab-content" #tabContent *ngIf="registry$ | async as registry">
  //subcomponent
</div>

The component that's trying to get the info:

export class StatDisplayComponent implements AfterViewInit {
  @ViewChild('tabContent') tabContentElement: ElementRef;

  constructor() { }
  
  ngAfterViewInit(){
    console.log(this.tabContentElement)
  }

I've heard of problems with ViewChild and *ngIf, but this component is an ancestor, so everything above it will necessarily have been created already, no?

* first, the visibility of that element depends on the observable so angular's `ngOninit`(ViewChild static = true) or `ngAfterViewInit`(ViewChild static = false) has probably passed before the observable emits. You can also look at the 2nd argument of `ViewChild` to see what i mean. https://stackoverflow.com/a/56359612/9732932 — The.Wolfgang.Grimmer, Oct 18 '20 at 05:26

score 0 · Answer 1 · answered Oct 18 '20 at 06:52

0

You can do a setter to listen when the tabContent is available since it depends on a observable.

tabContent: ElementRef;

@ViewChild("tabContent", { static: false, read: ElementRef }) set _tabContentElement(tabContent: ElementRef) {

    if (tabContent) {
      this.tabContent = tabContent;
    }
  }

answered Oct 18 '20 at 06:52

The.Wolfgang.Grimmer

1,172
2
9
32

Still undefined. – jugglervr Oct 18 '20 at 18:30
@jugglervr - make sure the value returned from the observable is a 'truthy' value – The.Wolfgang.Grimmer Oct 19 '20 at 00:02
Sorry, I'm not clear. The value returned by which observable? – jugglervr Oct 19 '20 at 00:29
The registry$ observable w/c async pipe subscribes to – The.Wolfgang.Grimmer Oct 19 '20 at 02:53
oh, yeah it's an object (which evaluates as truthy otherwise the *ngIf wouldn't fire. And it's firing in an ancestor, so it HAS to have returned a value, else the component I'm in wouldn't even be generated) – jugglervr Oct 19 '20 at 03:20
@jugglervr, if u can reproduce it in stackblitz, I'll try to look at it – The.Wolfgang.Grimmer Oct 19 '20 at 05:50

ElementRef for ViewChild of ancestor undefined

1 Answers1