Estoy teniendo un problema a la hora de cargar unos estilos en mi aplicación con Angular 10.
En el archivo app.component.html
he añadido lo siguiente (al principio del html):
<style>
.app-bar-wrapper, .app-bar {
background: linear-gradient(180deg,orange,yellow) !important;
}
</style>
Y en app.component.ts
he modificado el @Component
de la siguiente forma:
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None
})
Al ejecutar la aplicacion, veo como cambian los colores de la barra de navegación.
El problema lo tengo cuando necesito recuperar esos colores de base de datos. Hago una petición y almaceno toda la información en la variable this.style y veo que realmente los valores de dicha variable se estan inicializando correctamente con los colores que trae de base de datos.
Ahora modifico el bloque de estilos de la siguiente forma:
<ng-container *ngIf="style.headerColorFrom && style.headerColorTo">
<style>
.app-bar-wrapper, .app-bar {
background: linear-gradient(180deg,{{style.headerColorFrom}},{{style.headerColorTo}}) !important;
}
</style>
</ng-container>
Al cargar la aplicación, veo que los colores no se están aplicando y, al inspeccionar el dom, buscando esos estilos en la cabecera, puedo ver que están cargados, pero no ha traducido las variables a sus valores (aparecen las variables entre las dobles llaves).
¿Cómo hago entonces para que eso se aplique correctamente? He probado incluso a no inicializar la variable this.style
y, a pesar de la condición del ng-container
, me sigue cargando dicho bloque de estilos. ¿En que me estoy equivocando?
Un saludo.
*ngIf
directamente en la etiqueta<style>
?