Le control flow dans les composants : @if

Décider de ce qu'il faut afficher à l'écran pour un utilisateur est une tâche courante en développement d'applications. Bien souvent, cette décision est prise par programmation à l'aide de conditions.

Pour exprimer des affichages conditionnels dans les templates, Angular utilise la syntaxe de template @if.

Dans cette activité, vous allez apprendre à utiliser des conditions dans les templates.

La syntaxe qui permet l'affichage conditionnel d'éléments dans un template est @if.

Voici un exemple d'utilisation de la syntaxe @if dans un composant :

@Component({
  ...
  template: `
    @if (isLoggedIn) {
      <p>Welcome back, Friend!</p>
    }
  `,
})
export class App {
  isLoggedIn = true;
}

Deux points à noter :

• Le if est précédé d'un @, car il s'agit d'un type de syntaxe particulier appelé syntaxe de template d'Angular
• Pour les applications qui utilisent encore *ngIf, consultez la documentation Angular sur NgIf pour plus d'informations.

1. Créer une propriété nommée isServerRunning

   Dans la classe App, ajoutez une propriété boolean nommée isServerRunning et définissez sa valeur initiale à true.

2. Utiliser @if dans le template

   Mettez à jour le template pour afficher le message Yes, the server is running si la valeur de isServerRunning est true.

3. Utiliser @else dans le template

   Angular prend désormais en charge une syntaxe de template native pour définir le cas « sinon » avec la syntaxe @else. Mettez à jour le template pour afficher le message No, the server is not running dans le cas « sinon ».

   Voici un exemple :

   template: `
   @if (isServerRunning) {
     ...
   } @else {
     ...
   }
   `;

   Ajoutez votre code pour compléter le balisage manquant.

Ce type de fonctionnalité s'appelle le control flow conditionnel. Vous allez ensuite apprendre à répéter des éléments dans un template.