4

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.

3
  • ¿Has probado a poner el *ngIf directamente en la etiqueta <style>? el 30 mar. 2022 a las 9:59
  • Si, y pasa lo mismo, al revisar el dom, donde deberian ir los colores, aparecen los {{ XXXX.YYY }}
    – Alejandro
    el 30 mar. 2022 a las 10:00
  • No tengo tiempo para hacer pruebas, pero te he puesto dos posibles opciones en una respuesta, a ver si te ayudan o te dan ideas el 30 mar. 2022 a las 12:29

1 respuesta 1

3

Creo que la sintaxis de CSS no se lleva bien con los templates de Angular, que espera que añadas esta información en app.component.css.

Por tanto yo aplicaría directamente los estilos a los elementos en lugar de crear clases con ellos:

<mi-elemento [style.background]="myBackgroundStyle">

Definiendo en el componente algo como

this.myBackgroundStyle = `linear-gradient(180deg,${this.style.headerColorFrom},${this.style.headerColorTo})`;

Otra posible opción es tener todo el código CSS en un string en el componente y hacer algo como

<style> {{ cssCode }} </style>
1
  • Al final, la unica solucion que me funcionó fue haciendo algo parecido a esto, me generé una cadena con los nuevos estilos (a partir de la infor de BD) y, por jquery, hice una carga de una hoja de estilos nueva en la cabecera con el contenido generado... ya que en el momento que ponia en algun sitio la etiqueta style, lo que hubiera dentro era lo que cargaba, sin procesar las variables...
    – Alejandro
    el 7 abr. 2022 a las 10:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.