Quiero establecer una propiedad como una cadena y agregarla dinámicamente en un determinado elemento DOM como un valor de lista de clase.
<div [className]="propertyVariable"></div>Y dentro del componente de clase:
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-order', templateUrl: './order.component.html', styleUrls: ['./order.component.css'], }) export class OrderComponent implements OnInit { propertyVariable: string; constructor() {} changePropertyVariable() { this.propertyVariable = 'class1 class2'; } ngOnInit(): void {} }Hasta el momento, no agrega la configuración de la lista de clases a esa variable. ¿Cómo me vinculo correctamente a esa propiedad?
Úselo como [class.className]="condition" para agregar className si la condición es verdadera. En este escenario, className está codificado en la plantilla.
Si desea que el nombre de su clase sea dinámico, puede usar esta sintaxis: class="class1 class2 {{className}}" .
Para agregar una lista de clases, puede usarla como arriba, solo pase className = classList.join(' '); como nombre de className .
Entonces su plantilla será como: class="class1 class2 itemOneFromList itemTwoFromList ..."
Proporcioné un stackblitz
¿Por qué no usar la directiva Angular ngClass con enlace de propiedad para agregar clases dinámicamente?
<div [ngClass]="propertyVariable"></div>