title: How to get size of a child component in angular 2?
body: <p>I'm trying to center a modal. It contains other components, so the position depends on the content. I'm trying to get it this way, which doesn't work and not sure how to fix it:</p>
  
  <p>component HTML:</p>
  
  <pre><code>  &lt;div #modal [style.top]="positionTop" [style.left]="positionLeft"&gt;
      &lt;app-modal-one *ngIf="feature==='one'"&gt; &lt;/app-modal-one&gt;
      &lt;app-modal-two *ngIf="feature==='two'"&gt;&lt;/app-modal-two&gt;
      &lt;app-modal-three *ngIf="feature==='three'"&gt;&lt;/app-modal-three&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>component ts:</p>
  
  <pre><code>@ViewChild('modal') private modalContent: ElementRef;
  ngOnInit() {
      this.modalHeight = this.modalContent.nativeElement.offsetHeight;
      this.modalWidth = this.modalContent.nativeElement.offsetWidth;
      this.positionLeft = (window.innerWidth - this.modalWidth) / 2 + "px";
      this.positionTop = (window.innerHeight - this.modalHeight) / 2 + "px";
      console.log("on init: "+this.modalWidth)    
    }
  </code></pre>
  
  <p>The console log shows the size as 0.
  If I check it later once it's displayed, it shows the right size. When and how can I get this size (of the #modal) before/or just after it's all displayed?</p>