Angular
Control Flow

L'affichage conditionnel (@if)

Depuis Angular 17, une nouvelle syntaxe native très propre existe pour afficher ou masquer du HTML : @if. Elle remplace l'ancienne directive *ngIf.

État de la session
user = { Objet }
Avatar

Bienvenue, Alice

alice@example.com

En ligne
Angular 17+ (La nouvelle norme)
@if (user) {
  <div>Bienvenue {{ user.name }}</div>
} @else {
  <div>Veuillez vous connecter</div>
}
Avant Angular 17 (L'ancienne façon)
<div *ngIf="user; else noUser">
  Bienvenue {{ user.name }}
</div>

<ng-template #noUser>
  <div>Veuillez vous connecter</div>
</ng-template>

Le Code Source Complet

condition-if.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-user',
  template: `
    <button (click)="toggleLogin()">
      {{ user ? 'Déconnexion' : 'Connexion' }}
    </button>

    <hr>

    <!-- L'affichage conditionnel gère la visibilité -->
    @if (user) {
      <h3>Profil de {{ user.name }}</h3>
    } @else {
      <p>Accès refusé.</p>
    }
  `
})
export class UserComponent {
  // user vaut soit un Objet, soit null
  user: any = { name: 'Alice', email: 'alice@example.com' };

  toggleLogin() {
    if (this.user) {
      this.user = null; // On vide l'utilisateur
    } else {
      this.user = { name: 'Alice', email: 'alice@example.com' }; // On le recrée
    }
  }
}