Ajouter des classes conditionnelles avec ngClass dans Angular

Nous allons vous présenter comment ajouter des classes conditionnelles ou utiliser une condition if-else pour afficher des classes dynamiques avec ngClass dans nos applications Angular.

Ajouter des classes conditionnelles avec ngClass dans Angular

Les classes sont au cœur de la conception et de la création de l’interface utilisateur de nos applications. Nous écrivons des conceptions basées sur les classes attribuées aux différentes parties de nos applications.

Parfois, nous devons ajouter des classes dynamiques ou changer de classe en fonction des conditions.

Ce didacticiel discutera des différentes manières d’obtenir une instruction if-else dans ngClass dans Angular.

Créons une nouvelle application en utilisant la commande suivante.

# angular
ng new my-app

Après avoir créé notre nouvelle application dans Angular, nous irons dans notre répertoire d’application à l’aide de cette commande.

# angular
cd my-app

Maintenant, exécutons notre application pour vérifier si toutes les dépendances sont correctement installées.

# angular
ng serve --open

Commençons par un exemple simple dans lequel nous allons essayer d’ajouter une classe à un élément HTML si le message de condition est défini comme indiqué ci-dessous dans 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';
}

Ajoutons maintenant un élément HTML avec ngClass avec la condition utilisant la variable message dans app.component.html.

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

Ensuite, ajoutons du code CSS à la classe que nous ajoutons dans la div en fonction de la condition ci-dessous.

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

Production:

Comme vous pouvez le voir dans l’exemple, il est facile d’utiliser l’instruction if à l’intérieur de ngClass. Nous avons directement ajouté une classe basée sur la condition.

Maintenant, nous allons passer par un exemple dans lequel nous allons ajouter une classe basée sur la vraie condition. Si la condition est fausse, nous ajouterons différentes classes.

Donc, d’abord, nous allons ajouter une condition dans app.component.html et ajouter un bouton avec un événement de clic qui modifiera la condition, comme indiqué ci-dessous.

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

Créons maintenant une variable Warnmessage et une fonction qui modifiera la condition lors du clic sur le bouton. Notre code dans app.component.ts ressemblera à l’extrait ci-dessous.

# 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');
    }
}

Exécutons ce code et vérifions son fonctionnement.

Production:

Comme vous pouvez le voir, nous avons également utilisé l’instruction if-else dans ngClass, et cela fonctionne sous conditions. Mais si vous souhaitez ajouter plusieurs classes en fonction d’une seule condition, vous pouvez également le faire en ajoutant un espace et en écrivant un nouveau nom de classe après celui-ci.

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

Nous pouvons également ajouter plusieurs classes en ajoutant un espace après le nom de la première classe et en écrivant le nom de la deuxième classe. Nous pouvons même ajouter des classes triples ou autant que nous voulons.