Agregar clases condicionales con ngClass en Angular

Presentaremos cómo agregar clases condicionales o usar una condición if-else para mostrar clases dinámicas con ngClass en nuestras aplicaciones Angular.

Agregar clases condicionales con ngClass en Angular

Las clases son la parte central del diseño y la creación de la interfaz de usuario de nuestras aplicaciones. Escribimos diseños basados ​​en las clases asignadas a diferentes partes de nuestras aplicaciones.

A veces tenemos que agregar clases dinámicas o cambiar de clase según las condiciones.

Este tutorial discutirá diferentes formas de lograr una declaración if-else dentro de ngClass en Angular.

Vamos a crear una nueva aplicación usando el siguiente comando.

# angular
ng new my-app

Después de crear nuestra nueva aplicación en Angular, iremos al directorio de nuestra aplicación usando este comando.

# angular
cd my-app

Ahora, ejecutemos nuestra aplicación para verificar si todas las dependencias están instaladas correctamente.

# angular
ng serve --open

Comencemos con un ejemplo simple en el que intentaremos agregar una clase a un elemento HTML si el mensaje de condición se establece como se muestra a continuación en app.component.ts.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    message = 'warning';
}

Ahora, agreguemos un elemento HTML con ngClass con la condición usando el mensaje variable en app.component.html.

# angular
<div [ngClass]="{'warning': message}">
Hello this is a warning message
</div>

Luego, agreguemos un código CSS a la clase que estamos agregando en el div según la condición a continuación.

# angular
.warning {
    font-family: Lato;
    background: red;
    color: white;
    padding: 10px;
}

Producción:

Como puede ver en el ejemplo, es fácil usar la instrucción if dentro de ngClass. Agregamos directamente una clase basada en la condición.

Ahora, veremos un ejemplo en el que agregaremos una clase basada en la condición verdadera. Si la condición es falsa, agregaremos diferentes clases.

Entonces, primero, agregaremos una condición en app.component.html y agregaremos un botón con un evento de clic que cambiará la condición, como se muestra a continuación.

# angular
<div [ngClass]="Warnmessage ? 'warning' : 'info'">
    Hello this is a warning message
</div>
<button (click)=changeClass()>Click this</button>

Ahora, vamos a crear una variable Mensaje de advertencia y una función que cambiará la condición al hacer clic en el botón. Nuestro código en app.component.ts se verá como el siguiente fragmento.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    name = 'Angular ' + VERSION.major;
    Warnmessage = true;

    changeClass() {
        this.Warnmessage = false;
        console.log('Button Clicked');
    }
}

Ejecutemos este código y veamos cómo funciona.

Producción:

Como puede ver, también usamos la declaración if-else dentro de ngClass, y funciona con condiciones. Pero si desea agregar más de una clase en función de una sola condición, también puede hacerlo agregando un espacio y escribiendo un nuevo nombre de clase después.

# angular
<div [ngClass]="Warnmessage ? 'warning message-box' : 'info message-box'">
    Hello this is a warning message
</div>
<button (click)=changeClass()>Click this</button>

También podemos agregar varias clases agregando un espacio después del nombre de la primera clase y escribiendo el nombre de la segunda clase. Incluso podemos añadir clases triples o tantas como queramos.