Encountering an issue with [height] on the main component and seeking a solution
Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '753'. Current value: '731'.
I have three components that must be displayed in a fixed size panel.
The height of the main component should change based on the number of top and bottom components rendered on the screen.
The only workaround I've found is using offsetHeight, but it triggers an error in Angular.
I am aware that this can be resolved using jQuery or JavaScript, but I prefer a pure Angular solution.
<div #panelbody>
<div #top>
<top *ngFor="let top of tops; let i = index" [index]="i"></top>
</div>
<main [height]="panelbody.offsetHeight - top.offsetHeight - bottom.offsetHeight - 10"></main>
<div #bottom class="text-center">
<bottom *ngFor="let bottom of bottoms(); let i = index" [index]="i">
</bottom>
</div>
</div>