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.

Etiquetas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *