Angular 4 using setter on @ViewChild

Question

I have a demo here

I'm trying to get the height of an element after it is added to the DOM with *ngIf

I'm trying to do this by using a setter on the @ViewChild, the setter should be called one the *ngIf becomes true.

In my example it only seems to work when the element has been added then removed (button is clicked twice).

How can I get this to work when the element is firsy shown.

I know I can do this with [hidden] instead of *ngIf but my actual code has a lot of elements that I dont want to put in the DOM at once

import { Component, Input, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'child-comp',
  templateUrl: './child.component.html'
})

export class ChildComponent{

  @Input() parent: ElementRef;

  private blockThree: ElementRef;

  @ViewChild('blockThree') set content(content: ElementRef) {
    this.blockThree = content;
  }

  showThree: boolean = false

  blockHeightThree: number

  constructor(){ }


  showBlockThree(){
    this.showThree = !this.showThree
    this.blockHeightThree = this.blockThree.nativeElement.clientHeight;
    console.log('element height '+this.blockHeightThree);
  }

}

Answer 1

The reason it only works second time is, that the this.showThree = !this.showThree does not call the setter right away, because whole function finishes first, only then angular actually detects the changes and puts the element in place. It will work if you move the height reading logic into the setter.

That means you cannot read blockHeightThree in the showBlockThree function, because the block three simply is not there yet. But there is an inelegant solution to that. You can put setTimeout() there so the height is read asnychronously. Maybe it would do what you need.

Working Demo

    @ViewChild('blockThree') set content(content: ElementRef) {
      console.log("block three", content)
      this.blockThree = content;
      if (this.blockThree) {            
        this.blockHeightThree = this.blockThree.nativeElement.clientHeight;
        console.log(this.blockThree.nativeElement.clientHeight);
       }
    }

    showBlockThree() {
      this.showThree = !this.showThree
      console.log('element height ' + this.blockHeightThree);
      setTimeout(()=> console.log("async block three", this.blockHeightThree));
    }