Angular est-il vraiment plus compliqué que React ?

Quand on débute avec Angular, il est facile de se sentir découragé face à la multitude de concepts à assimiler. Cette complexité peut inciter à se tourner vers des frameworks comme React, qui semblent plus simples à première vue. Mais est-ce vraiment le cas ?

Abonnez-vous à notre chaîne

Pour profiter des prochaines vidéos sur Angular, abonnez-vous à la nouvelle chaîne YouTube !

Skip to content

Vous souhaitez recevoir de l'aide sur ce sujet ? rejoignez la communauté Angular.fr sur Discord.

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:

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

Exemple de base

typescript
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]'
  };
}
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 :

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

Conditions multiples avec @else if

Pour gérer plusieurs conditions :

angular-html
@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 :

typescript
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 :

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

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

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !