Les composants

1. Création

Les composants Angular sont définis par une classe précédée par un décorateur spécifique @Component, qui fournit des métadonnées permettant à Angular de comprendre comment créer et utiliser ce composant. Dans cette sous-section, nous allons examiner les propriétés clés d’un composant Angular et comment elles sont utilisées pour configurer le comportement et l’apparence du composant.

Voyons un exemple simple de création de composants dits "inline", c’est-à-dire que nous allons définir le style, le modèle HTML ainsi que le code TypeScript dans le même fichier.

D’abord, le selector représente le nom de la balise HTML de notre composant. Le standard de développement veut que nous préfixions notre élément par un mot-clé qui représente soit l’application, soit une section explicite. Par défaut, celui-ci est "app" ; nous allons garder cette valeur pour le moment mais plus de détails à ce propos seront donnés dans la sous-section Standards de ce chapitre. Ensuite, vous pouvez directement ajouter un modèle HTML dans la propriété template, en tant que chaîne de caractères, et faire de même pour la propriété style qui attend un ensemble de règles CSS.

1. Interpolation

La notion d’interpolation est une façon d’injecter du code qui doit être évalué afin de retourner une valeur textuelle pour être affichée dans le modèle HTML. La syntaxe est simple ; il suffit d’utiliser les doubles accolades "{{}}", comme nous l’avions aperçu dans le chapitre Les premières étapes avec Angular, pour lier une donnée à l’interface.

Vous pouvez retourner dans le composant créé précédemment, à l’intérieur de la classe TypeScript, y ajouter une propriété name de type string et lui assigner une valeur avec le texte que vous souhaitez. Puis, une fois dans votre modèle HTML, à la suite de "hello", ajoutez votre propriété avec interpolation.

Voici le code final :

// exemple.component.html 
<p>Hello {{name}}</p> 
 
// exemple.component.css 
p{ 
  color:red 
} ...

1. Input

De la même façon que la balise img possède un attribut src qui permet de recevoir une chaîne de caractères, nous allons apprendre à créer nos propres attributs afin de pouvoir récupérer des données de l’extérieur vers notre composant. Pour cela, Angular propose un décorateur spécifique aux données entrantes : @Input.

Nous pouvons reprendre notre composant d’exemple et y ajouter un Input. Pour cela, il faut ajouter une propriété num, de type number, dans la classe TypeScript, simplement précédée du décorateur, puis modifier le modèle HTML pour afficher cette propriété par interpolation :

import { Component } from '@angular/core'; 
 
@Component({ 
 selector: 'app-exemple', 
 template: `<div> 
   <span>{{num}}</span> 
   <button (click)="onClick()">Click</button> 
   </div>`, 
 styles: [], 
}) 
export class ExempleComponent { 
 @Input() num:number=0; 
 
 onClick(){ 
   console.log('click !'); 
 } 
} 

Cela signifie que, désormais, lors de l’utilisation de votre composant en HTML, vous pouvez lui assigner un attribut num, avec une valeur numérique, par exemple 10, comme suit :

<!-app.component.html --> 
 
<main class="main"> 
  <app-exemple [num]="10" /> 
</main> 

Maintenant, lors de l’affichage, vous devriez vous retrouver...

1. Phase de création

Voici la chronologie complète des hooks pour la phase de création :

 

Il faut savoir que pour pouvoir implémenter un hook, il vous faudra explicitement définir votre classe comme implémentant l’interface qui correspond. Par exemple, pour le premier hook ngOnChanges, il vous faudra changer la signature de votre classe en ajoutant le mot-clé "implements" (n’hésitez pas à revoir le chapitre TypeScript, sous-section Déclaration de classes pour un rappel sur l’héritage) suivi de l’interface OnChanges. Notez que les fonctions de hooks doivent avoir le même nom que les interfaces avec un préfixe "ng". Voyons les principaux hooks à travers les trois phases du cycle de vie d’une application. 

1. Le principe

La projection de contenu est réalisée à l’aide de la balise spéciale <ng-content>. Cette balise agit comme un point d’ancrage dans le modèle HTML d’un composant où le contenu fourni par le parent sera inséré. Prenons l’exemple d’un composant générique qui sert de cadre de design et auquel on veut pouvoir associer n’importe quel composant :

@Component({ 
  selector: 'app-card', 
  template: ` 
    <div class="card"> 
      <ng-content></ng-content> 
    </div> 
 `, 
  styles: ['.card { border: 1px solid #ccc; padding: 10px; }'], 
}) 
export class CardComponent {} 

On va pouvoir l’utiliser tel que :

<app-card> 
  <h2>Title</h2> 
  <p>Text content</p> 
</app-card> 
 
<app-card> 
  <app-exemple/> 
</app-card> 

Dans cet exemple, le contenu entre les balises ouvrante et fermante <app-card> sera projeté à l’intérieur du composant. Cela permet au composant CardComponent d’être réutilisé avec différents contenus tout en conservant une structure et un style cohérent.

2. Multiples projections

Il est possible d’avoir plusieurs projections de contenu dans le même composant, et pour cela nous pouvons ajouter des identifiants à ceux-ci via le duo d’attributs select et ngProjectAs, afin de garantir l’emplacement de chaque projection :

// generic component 
<div> 
  <ng-content select="card-title"   /> 
  <hr/> 
  <ng-content select="card-content"  /> ...

1. Introduction

Enfin, voyons un dernier élément fortement lié aux composants : le pipe. Un pipe est une fonction de transformation de donnée qui s’utilise principalement directement depuis le template d’un composant. C’est particulièrement utile pour formater une donnée, par exemple si l’on veut afficher une date avec un format particulier ou un montant numérique en suivant les normes de séparation des décimaux ou des milliers.

La syntaxe d’utilisation est simple, il faut qu’à l’intérieur d’un binding notre donnée soit suivie du caractère de trait vertical (ou pipe, d’où son nom) puis le nom de notre pipe, puis, si besoin, de paramètres, et les faire précéder du symbole deux-points ":".

@Component({ 
  selector: 'app-root', 
  template: ` 
    <main class="main"> 
      {{ myDate | date }} 
    </main> 
 `, 
}) 
export class AppComponent { 
  myDate = new Date(); 
} 

Angular fournit plusieurs pipes intégrés pour des tâches courantes comme le formatage des dates, des devises, ou la transformation de textes. En plus de ces pipes prédéfinis, il nous est possible de créer nos propres pipes personnalisés pour répondre à des besoins spécifiques.

2. Exemples de pipe intégré

Attention, plusieurs formats de données dépendent directement de la localisation, qui est une option configurable dans Angular. Par défaut, les standards et formats américains seront sélectionnés, mais si vous voulez modifier cela, vous le pouvez en spécifiant la langue souhaitée. Par exemple, pour sélectionner les standards français, il faudra suivre les étapes suivantes :

1. L’origine des modules

Depuis ses premières versions, Angular a utilisé les modules en tant que base solide de l’organisation du code. Un module Angular NgModule était initialement conçu comme un mécanisme de conteneur puissant permettant de regrouper des composants, des services, des directives et autres éléments de manière cohérente et structurée.

Dans l’architecture originelle d’Angular, chaque application devait posséder au moins un module racine, généralement nommé AppModule. Il servait de point d’entrée et de configuration principale pour l’ensemble de l’application. Les développeurs découpaient ensuite leurs projets en modules fonctionnels, chacun représentant un domaine spécifique ou une fonctionnalité distincte.

Voilà un exemple concret de module que l’on trouve dans les applications Angular :

@NgModule({ 
  declarations: [ 
    UserListComponent, 
    UserDetailComponent 
 ], 
 imports: [ 
    SharedModule 
 ], 
 providers: [  
    UserService 
 ], 
 exports: [ 
    UserListComponent 
 ] 
}) 
export class UserModule { } 

Un module se définit donc avec le décorateur...

1. Ajout de l’en-tête

L’en-tête est constitué des trois composants que nous allons créer dans un dossier app/layout/components/ pour former un ensemble tel que suit :

NavMenuComponent

UserCardComponent