Soy bastante nuevo en el desarrollo en Angular y me gustaría recibir ayuda para encontrar la mejor manera de crear una altura de CSS variable en Angular CLI V12. Para simplificar mucho mi pregunta, presentaré mi problema de la siguiente manera. Tengo tres cajas como se ve a continuación.

Imagen de cajas:

Estas tres cajas fueron hechas por tres componentes. cuyo código se encuentra a continuación.

aplicación.componente.html:

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

componente superior:

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

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

componente central:

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

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

componente inferior:

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

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

Lo que quiero hacer aquí es cambiar la altura del cuadro central dinámicamente a través de una variable en la parte mecanografiada de mi proyecto Angular. No creo que lo que estoy tratando de hacer aquí sea tan complicado, pero todas las fuentes que encuentro en línea para esto están algo desactualizadas y un poco confusas de seguir si eres nuevo en la escena del desarrollo. ¿Cuál sería la mejor manera de hacer esto? Gracias.