Maîtriser @if dans les templates Angular

@if est un nouveau contrôle de flux introduit dans Angular pour remplacer la directive *ngIf. Cette nouvelle syntaxe offre une approche plus claire et plus intuitive pour gérer les conditions dans vos templates. Imaginons cela comme un portier qui décide qui peut entrer dans une boîte de nuit : si vous remplissez les conditions, vous entrez, sinon vous restez dehors !

Compatibilité

@if est une syntaxe introduite dans Angular 17. Si vous utilisez une version antérieure, vous devez utiliser *ngIf.

Migration

Si vous souhaitez migrer des syntaxes, utilisez la commande:

ng g @angular/core:control-flow-migration

Exemple de base

user-details.component.ts

import { Component } from '@angular/core';
import { User } from './user';

@Component({
  selector: 'app-user-details',
  standalone: true,
  template: `
    <h2>Détails de l'utilisateur</h2>
    @if (user) {
      <div>
        <h3>{{ user.name }}</h3>
        <p>Email: {{ user.email }}</p>
      </div>
    } @else {
      <p>Aucun utilisateur sélectionné</p>
    }
  `
})
export class UserDetailsComponent {
  user: User | null = {
    id: 1,
    name: 'Alice',
    username: 'alice123',
    email: '[email protected]'
  };
}

user.ts

export interface User {
    id: number;
    name: string;
    username?: string;
    email: string;
    address?: {
        street: string;
        suite: string;
        city: string;
        zipcode: string;
        geo: {
            lat: string;
            lng: string;
        }
    };
    phone?: string;
    website?: string;
    company?: {
        name: string;
        catchPhrase: string;
        bs: string;
    };
}

Syntaxe générale

Condition simple avec @if

La structure de base est simple :

@if (condition) {
  // Code à exécuter si la condition est vraie
}

Conditions multiples avec @else if

Pour gérer plusieurs conditions :

@if (user.role === 'admin') {
  <div>Panel administrateur</div>
} @else if (user.role === 'manager') {
  <div>Panel manager</div>
} @else {
  <div>Panel utilisateur</div>
}

Bonnes pratiques

Il est possible de référencer le résultat de l'expression conditionnelle dans une variable pour la réutiliser à l'intérieur du bloc @if. Cette pratique peut grandement améliorer la lisibilité et la maintenabilité de votre template.

Voici un exemple :

import { Component } from '@angular/core';
import { User } from './user';

@Component({
  selector: 'app-user-list',
  standalone: true,
  template: `
    @if (getSelectedUser(); as selectedUser) {
      <div class="user-details">
        <h3>Utilisateur sélectionné :</h3>
        <p>Nom: {{ selectedUser.name }}</p>
        <p>Email: {{ selectedUser.email }}</p>
        <p>Nom d'utilisateur: {{ selectedUser.username }}</p>
      </div>
    } @else {
      <p>Aucun utilisateur sélectionné</p>
    }
  `
})
export class UserListComponent {
  private users: User[] = [
    { id: 1, name: 'Alice', username: 'alice123', email: '[email protected]' },
    { id: 2, name: 'Bob', username: 'bob456', email: '[email protected]' }
  ];

  getSelectedUser(): User | null {
    return this.users.find(user => user.id === 1) || null;
  }
}

Cette approche présente plusieurs avantages :

• Elle évite de répéter l'appel à getSelectedUser() plusieurs fois
• Elle améliore la performance en n'évaluant la fonction qu'une seule fois
• Elle rend le code plus lisible et plus facile à maintenir

Utilisation avec des observables

Une utilisation courante de @if est avec les observables et le pipe async :

@if (user$ | async; as user) {
  <div>{{ user.name }}</div>
} @else {
  <div>Chargement...</div>
}

Plus d'informations sur les observables et le pipe async ici.