Directiva ngClass en Angular

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.