title: Angular 4 using setter on @ViewChild
body: <p>I have a demo <a href="https://stackblitz.com/edit/angular-dgmnlf?file=app%2Fchild.component.ts" rel="noreferrer">here</a></p>
  
  <p>I'm trying to get the height of an element after it is added to the DOM with *ngIf</p>
  
  <p>I'm trying to do this by using a setter on the @ViewChild, the setter should be called one the *ngIf becomes true.</p>
  
  <p>In my example it only seems to work when the element has been added then removed (button is clicked twice).</p>
  
  <p>How can I get this to work when the element is firsy shown.</p>
  
  <p>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</p>
  
  <pre><code>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);
    }
  
  }
  </code></pre>