Ajouter une classe dans Angular

1. Ajouter une classe statique ou dynamique dans Angular
2. Utilisation de la NgClass dans Angular

Nous introduirons différentes méthodes comme className et ngClass pour ajouter des classes statiques ou dynamiques dans Angular. Nous présenterons également comment basculer les classes dans Angular.

Ajouter une classe statique ou dynamique dans Angular

Les classes sont la partie principale de toute application Web. Nous stylisons et exécutons différentes fonctions en fonction de leur nom de classe.

Comme les frameworks d’application d’une seule page, Angular brille en matière de liaison de données. Les éléments DOM sont automatiquement mis à jour s’il y a des changements dans l’objet JavaScript correspondant.

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

Nous pouvons lier nos noms de classe à n’importe quel élément HTML comme nous ajoutons habituellement un nom de classe en HTML. La seule différence est que nous utilisons className au lieu de class, comme indiqué ci-dessous.

# angular
<div [className]="'my-class'"></div>

Le code ci-dessus montre qu’il ne s’agit que d’une classe statique affectée à un élément div. Voyons maintenant comment nous pouvons ajouter des classes dynamiques en utilisant className.

Comme indiqué ci-dessous, nous pouvons modifier ou ajouter des classes à un élément en fonction d’une condition.

# angular
<div [className]="loggedIn ? 'logged-class' : 'my-class'"></div>

Lorsque la condition loggedIn est true, il attribuera la classe logged-class. Si la condition est false, il attribuera la classe my-class.

Nous pouvons également créer un nom de classe lors de l’exécution, comme indiqué ci-dessous.

# angular
<div [className]="'class' + myValue"></div>

L’exemple ci-dessus montre que nous ajoutons une chaîne class et une valeur myValue, qui peut être n’importe quoi au moment de l’exécution et créer un nom de classe.

Utilisation de la NgClass dans Angular

Le ngClass est une directive utilisée pour rendre le code plus simple, car il ne s’agit que de sucre syntaxique. Il est pratique et plus court à utiliser.

La ngClass est très polyvalente. Voyons donc comment nous pouvons utiliser ngClass, comme indiqué ci-dessous.

# angular
<div [ngClass]="'myclass'"></div>

Le ngClass nous aide également à ajouter plus d’un nom de classe, comme indiqué ci-dessous.

# angular
<div [ngClass]="['my-class','second-class']"></div>

Nous pouvons également utiliser des conditions pour attribuer des noms de classe et les basculer en fonction des conditions, comme indiqué ci-dessous.

# angular
<div
  [ngClass]="{
  'my-class': loggedIn
}"
></div>

Comme indiqué ci-dessous, nous pouvons également attribuer plusieurs classes en fonction de deux conditions différentes.

# angular
<div
  [ngClass]="{
  'my-class': loggedIn,
  'second-class': !loggedIn
}"
></div>

Nous pouvons également utiliser deux conditions différentes, comme indiqué ci-dessous.

# angular
<div
  [ngClass]="{
  'my-class': loggedIn,
  'second-class': myValue
}"
></div>

Ainsi, de cette manière, nous pouvons facilement attribuer des classes en fonction de conditions en utilisant ClassName et ngClass. Nous avons également appris à ajouter des classes dynamiques, statiques ou multiples à l’aide de directives Angular.