title: Set two elements to the same height
body: <p>I have one element that I am trying to set to the same height of another, and where the latter element is displayed conditionally using the <code>*ngIf</code> directive:</p>
  
  <pre><code>&lt;!-- HTML code --&gt;
  &lt;my-custom-component #notificationBar *ngIf="notificationMessage"&gt;
  &lt;/my-custom-component&gt;
  
  &lt;ion-content&gt;
    &lt;div style="background: red; width: 100%;"
      [style.height]="notificationBar &amp;&amp; notificationBar.nativeElement.offsetHeight"&gt;
    &lt;/div&gt;
    &lt;!-- .... --&gt;
  &lt;/ion-content&gt;
  
  
  //*.ts code
  @ViewChild("notificationBar") notificationBar: ElementRef;
  </code></pre>
  
  <p>The problem that I am facing is that I am having the <code>ExpressionChangedAfterItHasBeenCheckedError</code> error when my custom component is displayed:</p>
  
  <pre><code>ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'height: undefined'. Current value: 'height: 0'.
  </code></pre>
  
  <p>Is there any other proper way to set the two elements to the same height?</p>
  
  <p>Thanks</p>