Contrôle de flux et directives

Introduction

Après avoir exploré les bases des composants, il est temps de plonger dans un autre aspect de la manipulation de l’interface via deux ressources : le contrôle de flux et les directives.

Le mécanisme de contrôle de flux offre une syntaxe moderne pour appliquer des conditions, boucles et autres manipulations dynamiques du DOM de manière simple et optimisée par rapport à des alternatives plus manuelles. Les directives, quant à elles, sont des classes TypeScript. Aussi, pour modifier le DOM, il en existe deux principaux types : les directives d’attribut modifiant l’apparence ou le comportement d’un élément, puis les directives structurelles pour impacter la structure du DOM en ajoutant ou supprimant des éléments.

Ce chapitre vous guidera à travers ces concepts et vous permettra de maîtriser l’utilisation des directives afin d’enrichir vos applications.

Introduction à la micro-syntaxe

Le contrôle de flux ainsi que les directives structurelles utilisent ce que l’on appelle la micro-syntaxe, qui est une sorte de mini-langage dédié, appelé Domain-Specific Language qui va être interprété par Angular, afin de créer et manipuler des templates avec tous les bindings nécessaires.

Points de vocabulaire :

Contrôle de flux

@if(user.isLoggedIn===true){ 
  <span>Hello User</span> 
} @else if (user.isGuest === true){ 
  <span>Hello guest</span> 
} @else { 
  <button>Click here to log in</button> 
} 

@switch (user.role) { 
  @case ('Admin') { 
    <span>Hello Admin</span> 
 } 
 @case ('User') { 
  <span>Hello User</span> 
 } 
 @default { 
  <span>Hello Guest</span> 
} 
} 

<ul> 
  @for(item of items; let i = $index; track item.id){ 
    <li>{{ i + 1 }}. {{ item.name }}</li> 
 @empty { 
    <li>No item</li> 
  } 
</ul> 

Les directives

<span [ngClass]="'red big'"> Angular 18 </span> 

<span [ngClass]="['red','big']"> Angular 18 </span> 

<span [ngClass]="{red:true, 'clickable navigation': isLink}"> 
Angular 18 </span> 

<span [ngStyle]="{textDecoration:'underline'}">Angular 18</span> 

<input type="text" [(ngModel)]="name"/> 

Projet fil rouge

Au chapitre Les composants, nous avions pu créer et afficher des composants ; cependant, seuls la première colonne et le premier ticket étaient affichés. Dans cette étape du projet Kanban, nous allons transformer notre interface statique en dynamique en utilisant l’expression @for, puis, dans un deuxième temps, créer une directive pour pouvoir déplacer les tickets via un glisser-déposer afin de les transporter de colonne en colonne ou bien de les réordonner.

private getTicketsMap (columns: Column[], tickets: Ticket[]) { 
  const draftMap: Record<string, Ticket[]> = {}; 
  
  for (let ticket of tickets) { 
    if (!draftMap[ticket.columnId]) { 
      draftMap[ticket.columnId] = []; 
    } 
    const columnId = ticket.columnId; 
    draftMap[columnId].push(ticket); 
  } 
  
  for (let { id } of columns) { 
    const currentColumn = draftMap[id]; 
    if (!currentColumn) { 
      draftMap[id] = []; 
    } else currentColumn.sort((a, b) => a.order - b.order); 
  } 
  
  return draftMap; 
} 

ticketByColumnId: Record<string, Ticket[]> = {}; 

this.ticketByColumnId = this.getTicketsMap( 
  allBoard.columns, 
  allBoard.tickets 
); 

Conclusion

Dans ce chapitre, nous avons approfondi nos connaissances grâce aux directives, d’attribut et structurelles, tout en découvrant les nouveautés apportées par le contrôle de flux offrant une syntaxe modernisée et plus expressive pour manipuler dynamiquement le contenu des templates.

Dans la section pratique, nous avons transformé notre interface Kanban en utilisant des contrôles de flux pour boucler sur les éléments à afficher et des directives Angular pour la rendre plus interactive. La fonctionnalité de glisser-déposer illustre bien comment manipuler des éléments de l’interface de manière dynamique. Pour implémenter ce mécanisme, nous avons découvert de nouveaux décorateurs, utiles tant pour intercepter des événements natifs que pour accéder aux directives enfants, créant ainsi une structure solide, pour un comportement complexe. Structurer plusieurs directives avec une hiérarchie comme cela, utilisant @ContentChildren, est une pratique courante qui permet des interactions simples, sans surcharger les composants. Cela rend le comportement réutilisable et non spécifique, pour une bonne séparation des responsabilités.

Le code final de cet exercice est également disponible sur GitHub à l’URL (Uniform Resource Locator) suivante :...