How to make a variable css height for a div in Angular CLI V12

Question

I'm fairly new to developing in Angular and I'd like some help with finding the best way to create a variable CSS height in Angular CLI V12. To simplify my question by a lot I'll present my problem as follows. I've got three boxes as seen below.

Picture of boxes

These three boxes were made by three components. The code of which is below.

app.component.html:

<app-top></app-top>
<app-center></app-center>
<app-bottom></app-bottom>

top component:

 .box { width: 500px; height: 100px; padding: 10px; border: 5px solid black; margin: 0; }

 <div class="box">top box</div>

center component:

 .box { width: 500px; height: 100px; padding: 10px; border: 5px solid green; margin: 0; }

 <div class="box">center box</div>

bottom component:

 .box { width: 500px; height: 100px; padding: 10px; border: 5px solid yellow; margin: 0; }

 <div class="box">bottom box</div>

What I want to do here is change the height of the center box dynamically through a variable in the typescript portion of my Angular project. I don't think what I'm trying to do here is all that complicated but all the sources I find online for this are somewhat outdated and a bit confusing to follow if you are new to the development scene. What would be the best way to go about doing this? Thank you.

Answer 1

You can just use ngStyles to add style to html tags. For eg:

<div class="box" [ngStyle]="{'height': myCustomHeight}">center box</div>

Here "myCustomHeight" will be the variable whose value you can change accordingly in typescript.