javascript - Generar css dinámicos basados en variables angulares.

typescript angular2-template

Question

Estoy trabajando en un panel de administración desarrollado con angular 4 e intentando integrar secciones para personalizar el estilo como cambio de color, bg, etc. Ya he desarrollado una sección para guardar la configuración en la base de datos.

Ahora estoy tratando de generar un css dinámico usando valores de json, probé con el siguiente código en el componente principal pero no funciona

@Component({
      templateUrl: ''card.html'',
      styles: [`
        .card {
          height: 70px;
          width: 100px;
          color: {{css.cardColor}};
        }
      `],
})

No estoy seguro de cómo debo cargar los valores css en el componente y usarlos en la etiqueta de estilo. No encontré ninguna otra solución para el mismo.

Otra forma es usar el concepto de animación angular, pero el css va a ser enorme y no es posible implementarlo por completo con la animación angular utilizando disparadores y todo. Creo que hay una solución para esto, ya que parece un requisito genuino y debería haberlo hecho muchos otros desarrolladores.

Cualquier ayuda es apreciable.

Edición: no se puede usar ngStyle ya que se aplicará en casi todos los elementos, ya que es para toda la aplicación y no solo para un elemento específico.

Answer 1

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 valores devueltos desde y 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

Muestra 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 desde el servicio u otra variable como lo hice ngOnInit

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

Se usa jquery, pero también se puede hacer con javascript / typescript si no quieres usar jquery en tu aplicación angular

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

Answer 2

No estoy diciendo que sea aplicable, pero la biblioteca de angular/flex-layout hace una gran cantidad de manipulación de estilos. Mirar el código fuente puede ayudar a darle algunas ideas.

Recuerde aprovechar las directivas, servicios / inyección de dependencias.

Por ejemplo, aquí hay algunas clases útiles en la biblioteca de diseño flexible que pueden ser relevantes:

StyleUtils , StyleDirective , MatchMedia (crear dinámicamente etiquetas de hojas de estilo)

Answer 3

Solo puedes enlazar "style.color"

<div class="card" [style.color]=cardColor>lorem ipsum</div>

Answer 4

ngClass se usa para establecer la base de clase dinámica de su valor variable como se muestra a continuación

Ts File Component
     @Component ({
          selector:''simple-comp'',
          template:`   <ol class="breadcrumb">
        <li *ngClass="{''active'': step===''step1''}" (click)="step=''step1; ''">Step1</li>
        <li *ngClass="{''active'': step===''step2''}"  (click)="step=''step2''">Step2</li>
        <li *ngClass="{''active'': step===''step3''}" (click)="step=''step3''">Step3</li>
       </ol>`
      })
    export class SimpleComponent {
    public step: string = ''step1''; // change value like step1, step2, step3
    }

Referencia de angular.io: https://angular.io/api/common/NgClass

<some-element [ngClass]="{''first'': true, ''second'': true, ''third'': false}">...</some-element>

Answer 5

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

<div [ngStyle]="{''color'': variable ? ''red'' : ''blue''}"></div>

Otro ejemplo de lo mismo puede ser

 <div md-card-avatar [ngStyle]="{''background-image'': ''url('' + post.avatar + '')'', ''background-size'': ''cover''  }"></div>

Aquí he cargado la imagen de fondo del json