title: Angular 6: Update NG Style with function
body: <p>I'm here today because I'm wondering something about the NG Style with Angular (<strong>my version being the 6</strong>). How can i <strong>update [ngStyle]</strong> when <strong>I use a function</strong> to return a value.</p>
  
  <p><strong>As always, here is a simplified example of my problem:</strong></p>
  
  <p>I generate div from an array of objects.
  For each section, <strong>there are two div</strong>: one on the left and one on the right.</p>
  
  <p><strong>The size of the left div changes depending on the content</strong>, so it can do both 50px and 125px.</p>
  
  <p><strong>I want the right div to fit the size of the one on his left</strong>, always half that size (2 in getLeftDivHeight).
  Obviously, this will be done in each section (Container).</p>
  
  <p><strong>How can I make the ngStyle update when the div's height to the left changes</strong> (due to resizing, adding content, or page display time)? )</p>
  
  <p>Here is the code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;section class = "Container" *ngFor="let oneContent of allContent"&gt;
  
  &lt;div id = "{{oneContent.id}}" style="float: left"&gt;
  &lt;p&gt; {{oneContent.Content}} &lt;/ p&gt;
  &lt;/div&gt;
  
  &lt;div style="float: right" [ngStyle]="height: getLeftDivHeight(oneContent.id, 2)"&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Typescript</strong> (only the related function)</p>
  
  <pre><code>getLeftDivHeight(id: string, divisionNumber: number): string {
  height = document.GetElementById(id).getBoundingClientRect().height / 
  divisionNumber;
  return height + 'px';
  }
  </code></pre>
  
  <p>Note that I am not looking for an HTML solution, but an Angular one, the code above is just an example to explain my problem.</p>
  
  <p><strong>Thank you in advance</strong></p>