Genera css dinámico basado en variables angulares.

Luego de consultar expertos en esta materia, programadores de varias ramas y maestros hemos dado con la respuesta al dilema y la compartimos en esta publicación.

Solución:

puede usar ngStyle para agregar dinámicamente el css a su página desde json.

Otro ejemplo de lo mismo puede ser

aquí he cargado la imagen de fondo del json

El enfoque directo disponible en angular es usar ngstyle de la siguiente manera

Después de pasar por diferentes métodos y acercarme para agregar CSS dinámico a todas las páginas en la aplicación angular, terminé con las siguientes soluciones.

Requisito: generar css dinámico basado en los valores devueltos por la API para cambiar el diseño y el estilo.

Solución:

1. cree un nuevo componente y cree un servicio para cargar variables css dinámicas desde la API.
2. Agregue una etiqueta de estilo en el archivo de plantilla y use valores variables para las propiedades.
3. Cargue esta plantilla en todas las páginas o en la plantilla principal.
4. El estilo de compilación de la aplicación se moverá a la etiqueta principal.

Ejemplo de código

import  CssService from './Css.service';

@Component(
  selector: 'DynamicCss',
  templateUrl: './DynamicCss.component.html',
  styleUrls: ['./DynamicCss.component.scss']
)
export class ServiceProviderComponent implements OnInit 
    cssVariables: any;
    constructor(private cssService:CssService)
        /* call the service/api to get the css variable values in cssVariables */

    

Ahora aplique css usando jquery o javascript para agregar css con la ayuda de una función como la siguiente

appendCss(customData)

     let text = '.custom-form-1 
            background-image: url("`+customData.background_image+`");
         ';
     $(document).ready(function()
         $("style").append(text);
      );

y llame a esta función después de cargar datos personalizados del servicio u otra variable como lo hice yo ngOnInit

ngOnInit()
 this.appendCss(this.customizeFormData);

Está usando jquery, pero también se puede hacer con javascript/typescript si no desea usar jquery en su aplicación angular

Otro recurso útil https://github.com/angular/angular/issues/9343#issuecomment-312035896

Solo puedes enlazar style.color:

lorem ipsum

Reseñas y valoraciones del post

Al final de todo puedes encontrar las referencias de otros administradores, tú asimismo eres capaz mostrar el tuyo si lo deseas.

---

---

Utiliza Nuestro Buscador