title: Angular 4 event after element displayed with *ngIf
body: <p>I have a demo <a href="https://stackblitz.com/edit/angular-uja1kz?file=app%2Fchild.component.ts" rel="nofollow noreferrer">Here</a></p>
  
  <p>I have a div in a component that is shown with an *ngIf</p>
  
  <p>I need to know the height of this element.</p>
  
  <p>I can't seem to do this before it is displayed or in the function that shows the element.</p>
  
  <p>Is there an event that occurs that I can use to get the height</p>
  
  <pre><code>import { Component, Input, ElementRef, OnInit, ViewChild, AfterViewInit } from '@angular/core';
  
  @Component({
    selector: 'child-comp',
    templateUrl: './child.component.html'
  })
  
  export class ChildComponent implements OnInit, AfterViewInit {
  
    @Input() parent: ElementRef;
  
    private block: ElementRef;
  
    @ViewChild('block') set content(content: ElementRef) {
      this.block = content;
   }
  
    show: boolean = false
    blockHeight: number
  
    constructor(){ }
  
    // ngOnInit(){
    //   this.blockHeight = this.block.nativeElement.clientHeight;
    // }
  
    ngAfterViewInit(){
      this.blockHeight = this.block.nativeElement.clientHeight;
      console.log('AfterViewInit '+this.blockHeight);
    }
  
    showBlock(){
      this.show = !this.show
      this.blockHeight = this.block.nativeElement.clientHeight;
      console.log('showBlock '+this.blockHeight);
    }
  }
  </code></pre>