Hola a todos, hoy os explicare como funciona la directiva ngClass en Angular.
La directiva ngClass es parecida a la directiva *ngIf que ya vimos.
Esta directiva lo que hace es que si se cumple la condición que le indicamos, agregará al elemento la clase que le hayamos indicado.
import { Component } from '@angular/core';
@Component({
selector: 'app-component-example',
templateUrl: './component-example.component.html',
styleUrls: ['./component-example.component.css']
})
export class ComponentExampleComponent {
rojo: Boolean = false;
constructor() { }
}
<h1 [ngClass]="{ 'regla1':rojo }">
Hola mundo
</h1>
<button (click)="rojo=!rojo">Cambiar de color</button>
En este ejemplo, lo que hace es que si la variable rojo esta activo, ngClass se activa y se añade la clase indicada.
Os muestro el ejemplo:
Si pulsamos el botón de cambiar color, porque cambio el estado de la variable.
Si quieres poner mas reglas, puedes poner mas reglas poniendo espacios, por ejemplo:
<h1 [ngClass]="{ 'regla1 regla2':rojo }">
Hola mundo
</h1>
<button (click)="rojo=!rojo">Cambiar de color</button>
Y si quieres mas condiciones o diferentes condiciones, solo tienes que añadir una coma, despues de la primera condición dentro de la llave, algo asi:
{‘estilo1’: condicion1, ‘estilo2’:condicion2}
Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.
