Ajouter une classe à un élément dans Angular

1. Ajouter des classes sans Angular 4
2. Ajouter une classe à un élément à l’aide de la propriété ClassName dans Angular 4
3. Ajouter une classe à un élément à l’aide de la directive NgClass dans Angular 4

Angular 4 est un framework pour créer des applications Web. Il est construit sur TypeScript et possède de nombreuses fonctionnalités qui le rendent plus puissant et flexible que Angular 2.

L’une des fonctionnalités qui rendent Angular 4 plus puissant est le concept d’ajout de classes à un élément.

Le moyen le plus simple d’ajouter une classe à un élément dans Angular 4 consiste à utiliser la syntaxe du sélecteur d’attributs HTML avec la directive NgClass.

Cette syntaxe peut être utilisée sur n’importe quelle balise HTML et vous permet d’appliquer plusieurs classes à la fois, qui peuvent ensuite être appliquées selon les besoins par d’autres directives ou règles de feuille de style.

Cet article couvrira en détail l’ajout d’une classe à un élément dans Angular 4.

Avant de faire cela, nous examinerons comment les classes sont allouées à l’aide de JavaScript traditionnel par rapport à la façon dont elles sont affectées dans Angular.

Ajouter des classes sans Angular 4

La bibliothèque JavaScript populaire Angular fournit un moyen de le faire en utilisant la directive NgClass. Cette directive vous permet d’ajouter et de supprimer facilement des classes d’un élément de manière dynamique.

Cependant, si vous n’utilisez pas Angular, il existe plusieurs autres façons d’utiliser JavaScript pour accomplir cette tâche.

Un plugin jQuery nommé addClass permet d’ajouter facilement une classe à n’importe quel élément du moment qu’il a été initialisé avec jQuery. Vous pouvez également utiliser la méthode .setAttribute() en JavaScript et définir la propriété className sur le nœud DOM manipulé.

Ajouter une classe à un élément à l’aide de la propriété ClassName dans Angular 4

Pour se lier directement à la propriété className dans Angular 4, nous utiliserons la propriété ClassName. Il ajoute des classes à n’importe quel élément, accessibles à l’aide de crochets après le sélecteur ou par la syntaxe à points ClassName.

<div
    [className]="isActive ? 'active' : 'inactive'">
</div>

Si isActive renvoie true, la classe active est ajoutée ; sinon, inactive reste le même.

Ajouter une classe à un élément à l’aide de la directive NgClass dans Angular 4

Il existe de nombreux cas d’utilisation de la directive NgClass. L’une des plus courantes consiste à ajouter une classe à un élément lorsqu’un utilisateur clique dessus.

La directive NgClass vous permet d’ajouter des classes à un élément en fonction de certaines conditions. Par exemple, lorsqu’un utilisateur clique sur un composant, vous pouvez ajouter la classe active à cet élément.

La directive NgClass est utile car elle vous permet d’ajouter et de supprimer dynamiquement des classes d’éléments dans votre application Angular. De plus, la directive elle-même est hautement adaptable et fait diverses choses en fonction de l’entrée.

Par exemple, supposons que nous voulions affecter une classe statique en utilisant NgClass. Discutons de sa syntaxe.

<div [ngClass]="'Class-Name'">/div>

NgClass peut également attribuer plusieurs noms de classes statiques simultanément.

<div [ngClass]="['Class-Name', 'other-class']">/div>

Exemple complet d’ajout de classes à un élément dans Angular 4

Code HTML:

<p [ngClass]="something === 'first' ? 'blue red-border' : 'blue'">
Add some text here
</p>
<p [ngClass]="something === 'first' ? 'blue red-border' : 'blue'">
Add some text here
</p>

Code CSS :

p {
    font-family: Lato;
}
.blue {
    background-color: blue;
}
.red-border {
    border: 2px solid red;
}
*{
    color: white;
}

Code TypeScript :

import { Component, ViewChild, OnInit, Renderer2, ElementRef, } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    name = 'Angular 4';
    something = 'first';
    constructor(private renderer: Renderer2) {}
}

Cliquez ici pour voir la démonstration en direct des exemples mentionnés ci-dessus.