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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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() { } } |
|
1 2 3 4 5 6 |
<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:
|
1 2 3 4 5 6 |
[ngClass]="{ 'regla1 regla2':rojo }"> Hola mundo |
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.
Deja una respuesta