Today, my curiosity lies in the NG Style with Angular 6. Specifically, I am seeking guidance on how to dynamically update [ngStyle] when utilizing a function to determine the value.
To better illustrate my query, let me present a simplified scenario: I have an array of objects that populate div elements. Each section consists of two divs - one on the left and one on the right.
The width of the left div varies based on its content, ranging from 50px to 125px. Meanwhile, I aim to have the right div adjust its size to half of its adjacent left div (as determined by getLeftDivHeight method) within each section (Container).
My primary challenge is figuring out how to trigger ngStyle updates whenever the height of the left div changes due to resizing, content additions, or page rendering.
Below is the code snippet:
HTML
<section class = "Container" *ngFor="let oneContent of allContent">
<div id="{{oneContent.id}}" style="float: left">
<p> {{oneContent.Content}} </ p>
</div>
<div style="float: right" [ngStyle]="{'height': getLeftDivHeight(oneContent.id, 2)}">
</div>
</div>
Typescript (relevant function only)
getLeftDivHeight(id: string, divisionNumber: number): string {
const height = document.GetElementById(id).getBoundingClientRect().height /
divisionNumber;
return height + 'px';
}
Please note that my quest for a solution revolves around Angular rather than HTML techniques. The provided code serves solely to articulate the issue at hand.
Your insights are appreciated!