title: How to get the dimension of dynamic rendered element in Angular
body: <p>just imagine:
  1. in <strong>component.html</strong>, you have</p>
  
  <pre><code>&lt;div id = "myDiv"&gt;
        &lt;p&gt;{{text}}&lt;/p&gt;
  &lt;div&gt;
  &lt;button (click)="changeText()"&gt;changeText&lt;/button&gt;
  </code></pre>
  
  <ol start="2">
  <li><p>in <strong>component.css</strong> / we do not set the height of div explicitly. The height of <strong>div</strong> depends on the height of <strong>p element</strong>. In other words, <strong>the number of words</strong> inside p decides the height of <strong>div</strong></p></li>
  <li><p>in component.ts
  there is a function, which we can call it anytime and set the <strong>{{text}} property</strong>. So the div and p get rendered at runtime and dynamically. Like:</p></li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export class someComponent implements OnInit {
  
    constructor(private el: ElementRef) { }
  
    ngOnInit() {
    }
  
    changeText() {
      this.text = 'blablablabla.....';
      let divEl = this.el.nativeElement.querySelector('#myDiv');
      divEl.clientHeight/ or offsetHeight or/ getComputedStyle (can not get the correct value here!)
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Q: how can we get the actual height of the div after I change the text.  (I can get the element by ElementRef) I have tried .offsetHeight, .clientHeight, .getComputedStyle.height....// It seems like all of them return the original value, not the actual value at runtime. </p>