Débutez avec Angular

La meilleure façon de modifier plusieurs styles en même temps est d'utiliser des classes CSS, surtout s'il s'agit d'un élément avec plusieurs enfants. Dans ce chapitre, vous allez modifier plusieurs styles des éléments de vos cards quand un utilisateur clique sur "Oh Snap!" avec la directive[ngClass].

Ajoutez dynamiquement des classes

L'objectif de ce chapitre est de faire ressortir visuellement les FaceSnaps que l'utilisateur a "snapped". On pourra imaginer une classe snapped  qui viendra s'ajouter à la  <div class="face-snap-card">  pour modifier quelques couleurs, par exemple. On ajoute cette classe dans  face-snap.component.scss, car c'est là où elle servira :

.snapped {
  background-color: rgba(lightgreen, 0.4);
  color: darkgreen;
  button {
    box-shadow: lightgreen 3px 3px 7px;
    color: darkgreen;
    &:active {
      box-shadow: lightgreen 0 0 5px;
    }
  }
}

Maintenant, il va falloir appliquer cette classe conditionnellement. Je vais vous expliquer le fonctionnement de la directive  [ngClass]  et vous laisser essayer d'implémenter la fonctionnalité recherchée.

Comme avec  NgStyle  , il faut d'abord ajouter  NgClass  aux imports du component :

// ...
import { NgClass, NgStyle } from '@angular/common';

@Component({
  selector: 'app-face-snap',
  standalone: true,
  imports: [
    NgStyle,
    NgClass
  ],
  templateUrl: './face-snap.component.html',
  styleUrl: './face-snap.component.scss'
})
export class FaceSnapComponent implements OnInit {
    // ...
}

[ngClass]  prend un objet en argument, comme  [ngStyle], mais dont le fonctionnement est différent :

• les clés sont les noms de classe CSS à appliquer ;

• les valeurs sont les conditions qui doivent être remplies pour que les classes correspondantes s'appliquent.

En gros :

<div [ngClass]="{ 'class-name': condition }"></div>

Prenez quelques instants maintenant pour essayer d'implémenter la fonctionnalité où la nouvelle classe  snapped  s'applique uniquement si l'utilisateur a cliqué sur le bouton "Oh Snap!".

…

…

Et maintenant la solution !

Comme vous le savez, on peut "suivre" l'état cliqué ou non du bouton "Oh Snap!" en regardant la variable  userHasSnapped  . On peut donc dire que la classe  snapped  doit s'ajouter uniquement si  userHasSnapped est  true  . On a donc :

<div class="face-snap-card" [ngClass]="{ snapped: userHasSnapped }">

En testant, vous voyez que la classe s'ajoute quand on clique sur "Oh Snap!", et se retire quand on clique sur "Oops, unSnap!". On a bel et bien un comportement de classe dynamique !

En résumé

• La directive  [ngClass]  permet d'ajouter dynamiquement des classes à des éléments HTML.

• [ngClass]  prend un objet en argument où les clés sont des noms de classe CSS, et les valeurs sont les conditions selon lesquelles les classes doivent être appliquées.

Qu'avez-vous appris dans cette partie du cours ?

• Vous avez découvert les directives : des classes qui permettent d'ajouter des comportements à des éléments HTML, ou même à des components.

• Vous avez implémenté des directives structurelles pour modifier la structure du document :

  • *ngIf  pour ajouter un élément ou non au DOM selon une condition donnée ;

  • *ngFor  pour ajouter autant d'éléments au DOM qu'il y a d'éléments dans un tableau.

• Vous avez utilisé des directives par attribut pour gérer dynamiquement les styles :

  • [ngStyle]  pour paramétrer des styles selon des valeurs venant du TypeScript ;

  • [ngClass]  pour ajouter et retirer des classes CSS selon une condition donnée.

Votre application commence à prendre forme, et à être de plus en plus dynamique ! Dans la prochaine partie du cours, vous ajouterez un autre outil important à votre ceinture : les Pipes. Mais avant d'y aller, je vous ai concocté un quiz pour valider ce que vous avez appris de cette partie !