Tengo diferentes archivos CSS (red.css, blue.css) en el único componente angular. ¿Cómo podemos importar el archivo css según la condición? Si mencioné el color como rojo, se debe importar el archivo red.css.
this.activatedRoute.paramMap.subscribe(params=> { let color=params.get('color'); console.log(color); }) red.css .my-container{ height: 100%; background-color: red; } blue.css .my-container{ height: 100%; background-color: blue; } <div class="my-container"> <h1 class="sideheading">URL that entered are processed for Theme Changing of the Page</h1> </div>Múltiples archivos CSS y condición que toma el color como entrada y debe aplicar el archivo css de acuerdo con el color dado.
Parte CSS:
.my-red-container{ height: 100%; background-color: red; } .my-blue-container{ height: 100%; background-color: blue; }Parte angular: supongamos que tiene una variable mecanografiada llamada color y su valor es 'azul' o 'rojo
<div [ngClass]="{'my-red-container': color === 'red', 'my-blue-container' : color === 'blue' }" ></div>Parte CSS
.my-red-container{ height: 100%; background-color: red; } .my-blue-container{ height: 100%; background-color: blue; }Componente.html Parte
<div [ngClass]="{color === 'red' ? 'my-red-container' : 'my-blue-container'}"> </div>