03.1 - Les Directives

Introduction

Souviens-toi des jours heureux où tu débutais tout juste dans le monde du développement. N'as-tu donc pas rêvé jadis de pouvoir ajouter une propriété de style (comme une couleur rouge) à un élément HTML ? Par exemple à une balise <p> en écrivant simplement <p red> ?

✅ Avec les directives, Angular va te permettre d'approcher ce rêve fou !

Elles vont grandement te simplifier la vie grâce à leur capacité à modifier un élément HTML sans passer par des techniques de Javascript traditionnel (vanilla), telles que :

document.getElementById("elementHtmlAModifier")

Avant de démarrer, assure-toi d'avoir terminé les quêtes suivantes👇

Objectifs

✅ Comprendre les attribute directives de Angular (ngClass et ngStyle) ✅ Comprendre les structural directives de Angular (ngIf et ngFor)

Un peu de jargon

Attribute directives VS structural directives

Dans Angular, les directives peuvent être de type attribute ou structural.

Les attribute directives modifient l'apparence ou le comportement d'un élément HTML (par exemple, changer de background color ou ajouter une classe). Les attribute directives les plus connues sont [ngClass] et [ngStyle]. Elles sont fournies par défaut par Angular (on dit aussi qu'elles sont prédéfinies, ou "built-in").

Les structural directives, elles, modifient l'arbre DOM : selon qu'une condition est remplie ou non, l'élément HTML s'affichera ou ne s'affichera pas. Les structural directives les plus connues sont *ngIf et *ngFor. Elles sont également prédéfinies dans Angular.

En d'autres termes, les attribute directives peuvent être vues comme les décorateurs d'intérieur d'une maison (elles modifient l'apparence sans toucher à l'intégrité du bâtiment), tandis que les structural directives en sont les constructeurs/démolisseurs (elles peuvent abattre des murs, voire carrément enlever des pièces).

Pour la suite de cette étape (et tout le reste de la quête), pars de l'app Angular que tu as créée dans la précédente quête :

Attribute directives

L'attribute directive [ngClass]

Afin de t'entraîner à utiliser cette directive, imagine que c'est la saison de la raclette 🧀 (mais y a-t-il seulement besoin d'une saison précise pour en manger ?). Tu as la bonne idée d'organiser une soirée autour de ce mets des dieux. Afin de ne rien oublier, tu dresses une liste de courses :

<ul>
    <li>Pommes de terre</li>
    <li>Raclette</li>
    <li>Jambon</li>
    <li>Cornichons</li>
    <li>Chou-fleur</li>
</ul>

Il se trouve que tu ne veux surtout pas manquer de cornichons (chacun ses priorités). Tu souhaites donc que cet élément apparaisse en rouge et en gras. Il va te falloir ajouter une classe sur l'élément <li> correspondant à "cornichons". Dans ton fichier app.component.css, tu vas donc créer une classe vital :

.vital {
    color: red;
    font-weight: bold;
}

Comme tu souhaites que cette classe ne soit appliquée à l'élément que lorsqu'il est vital de l'acheter, tu vas, côté app.component.ts, définir une variable de type booléen, isThisIngredientVital.

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

export class AppComponent {
  title: string = 'Raclette party 🧀';

  isThisIngredientVital: boolean = true;
}

Tous tes éléments sont en place ! En retournant dans app.component.html, tu peux maintenant utiliser [ngClass] dans toute sa splendeur :

<ul>
    <li>Pommes de terre</li>
    <li>Raclette</li>
    <li>Jambon</li>
    <li [ngClass]="{'vital': isThisIngredientVital}">Cornichons</li>
    <li>Chou-fleur</li>
</ul>

En coulisses, cette syntaxe te permet de dire à Angular de n'attribuer la classe vital à l'élément <li> que si isThisIngredientVital a la valeur true .

Ceci est équivalent à :

[ngClass]="{'vital' : isThisIngredientVital === true}" 

Dans le navigateur, le résultat sera :

Afin de bien observer le fonctionnement de la directive, change la valeur de isThisIngredientVital à false : les cornichons devraient à nouveau apparaître en noir.

L'attribute directive [ngStyle]

Toujours dans le contexte de ta soirée à venir, quelqu'un te fait remarquer que le fromage constitue également un ingrédient essentiel pour une soirée entre amis réussie. Tu décides donc de mettre une couleur de fond rouge à l'élément <li>Raclette</li>, toujours en fonction de la valeur de la variable isThisIngredientVital.

Voici la syntaxe à utiliser :

<ul>
    <li>Pommes de terre</li>
    <li [ngStyle]="{backgroundColor:isThisIngredientVital ? 'red' : 'yellow'}">Raclette</li>
    <li>Jambon</li>
    <li [ngClass]="{'vital': isThisIngredientVital}">Cornichons</li>
    <li>Chou-fleur</li>
</ul>

Tu peux reconnaître ici une forme d'opérateur ternaire : si isThisIngredientVital a la valeur true, alors la valeur de backgroundColor sera 'red' ; si non, elle sera 'yellow' (on aurait également pu choisir 'transparent', mais de cette façon, le cas où isThisIngredientVital a la valeur false est mieux visible).

Et le résultat dans le navigateur, quand isThisIngredientVital est true :

Et quand isThisIngredientVital est false :

Structural directives

Avant d’entrer dans les détails, il est important de te rappeler que les structural directives sont préfixées par le signe *. Pourtant, si tu utilises l'inspecteur de ton navigateur pour examiner le code de ta page, tu ne verras pas ce symbole. En effet, il s'agit seulement d'un cas de "sucre syntaxique" (syntaxic sugar), c'est-à-dire d'une facilité d'écriture destinée à améliorer la qualité de vie des devs.

Ainsi, si l'on prend l'exemple de *ngIf, celui-ci est en réalité équivalent à :

<ng-template [ngIf]="maCondition">
        ...
        ...
        ...
</ng-template> 

où, à la place des ..., se trouveront les éléments HTML que tu souhaites afficher, uniquement si ta condition est vraie.

La structural directive *ngIf

La directive *ngIf permet d'afficher un élément DOM de manière conditionnelle. Appliquée à un élément HTML, elle évalue l'expression à laquelle elle est liée. Si celle-ci est truthy, alors l'élément sera affiché. Dans le cas contraire, l'élément sera enlevé du DOM. En d'autres termes, *ngIf te permet d'afficher ou de cacher des éléments, ce qui est une des fonctionnalités les plus répandues de Javascript sur le web.

Toujours dans le contexte d'une soirée raclette, imaginons que tu dresses une liste d'invités :

<ul *ngIf="isGuestListDisplayed">
    <li>Brenda</li>
    <li>Dylan</li>
    <li>Michel Drucker</li>
    <li>Marc Aurèle</li>
    <li>Julie</li>
</ul>

Tu décides que cette liste ne doit être affichée que si une variable, nommée isGuestListDisplayed, est vraie.

Ton app.component.html sera :

<ul>
    <li *ngIf="isGuestListDisplayed">Brenda</li>
    <li>Dylan</li>
    <li>Michel Drucker</li>
    <li>Marc Aurèle</li>
    <li>Julie</li>
</ul>

Cette expression est équivalente à :

*ngIf="displayGuestList === true"

Ton app.component.ts sera :

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title: string = 'Raclette party 🧀';

  isThisIngredientVital: boolean = true;
  isGuestListDisplayed: boolean = false;
}

En changeant la valeur de isGuestListDisplayed de false à true, tu peux voir que cela a une influence directe sur l'affichage de la liste des invités en HTML.

La structural directive *ngFor

Cette directive permet de boucler dans une liste d'éléments et de les afficher un par un. Supposons que, pour ta soirée, tu souhaites créer une playlist. Pour ce faire, tu dois d'abord déclarer un tableau contenant les titres des chansons que tu veux écouter dans app.component.ts :

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

export class AppComponent {
  title: string = 'Raclette party 🧀';

  isThisIngredientVital: boolean = true;
  isGuestListDisplayed: boolean = false;
  songList: string[] = ["Alejandro", "Ne me quitte pas", "Le temps est bon"];
}

Puis, dans app.component.html, il faut utiliser la syntaxe suivante (qui n'est pas sans rappeler celle d'une boucle for classique en Javascript) :

<ul>
    <li *ngFor="let song of songList">
        {{song}}
    </li>
</ul>

La liste des chansons s'affiche dans ton navigateur ! Pour tester, tu peux en enlever du tableau ou en ajouter.

Challenge 💪

Le coup classique !

Crée une application Angular via ton terminal et poster le lien Github.

• Ajoute un titre "Bonjour !"
• Crée deux boutons en HTML : "View" et "Edit" (inutile de leur faire faire quoi que ce soit)
• Déclare une propriété boolean isAdmin dans ton component (false ou true).
• Utilise une structural directive pour afficher "Edit" uniquement si isAdmin est à true.
• Utilise NgClass ou NgStyle pour afficher le titre en rouge quand isAdmin est à true.

Critères de validation ✅

• Quand tu changes la valeur de isAdmin: false → true (ou true → false) dans ton code, le rendu doit être différent et correspondre aux points ci-dessus.