Les types de composants Angular et les nouveautés d’Angular 9

Publié le

Aujourd’hui, le développement front-end a convergé vers la notion de composants. C’est bien sûr aussi le cas d’Angular. Mais il y a des types de composants très différents.

Cet article (disponible en Anglais sur Medium) a pour objectif :

Cet article suppose que vous avez déjà une connaissance des bases d’Angular.

Extension Visual Studio Code

  • Dans VS Code, installez l’extension Angular Schematics,
  • faites ensuite un clic droit sur le répertoire dans lequel vous souhaitez créer votre composant (par exemple src/app),
  • choisissez “Generate a component”,
  • tapez le nom que vous désirez pour votre composant (par exemple hello),
  • 4 ou 5 types spéciaux de composants vous seront proposés.

Page : composants avec une route

Dans une application, le premier type de composant dont vous aurez besoin est une page. Sans quoi votre application est vide.

Les pages ont 2 caractéristiques :

  • elles sont associées à une route,
  • la plupart du temps, elles reposent sur une opération asynchrone (comme une requête HTTP) pour récupérer leurs données.

Option recommandée (mais pas obligatoire) : pas de sélecteur. Pourquoi ? Car les pages sont supposées être utilisées via le router, et non invoquées via une balise HTML. Sinon cela peut provoquer des problèmes, dans la mesure où les pages font souvent appel aux données de la route (par exemple le service ActivatedRoute pour récupérer les paramètres de l’URL).

ng g component test --skip-selector

Avec Ivy, le nouveau moteur d’Angular 9, les modals et dialogs doivent aussi être considérées comme des pages (voir les détails ci-dessous).

Pur : composants de présentation

Dans une bonne architecture, la présentation ne doit pas se faire directement dans les pages, mais dans des composants de présentation séparés, connus sous le nom de composants purs.

Leur principale caractéristique : un composant pur repose uniquement sur ses @Input (c’est-à-dire les attributs de la balise HTML) pour récupérer ses données.

Cela permet d’activer une option de performance : vous pouvez alors passer la détection de changement d’Angular en mode OnPush, ce qui signifie que le composant ne sera plus vérifié que lorsque ses @Input changent (et plus quand une opération asynchrone quelconque se produit dans l’application).

ng g component test --change-detection OnPush

A noter qu’il est possible de rendre certaines pages pures avec le pipe async, mais cela nécessite une connaissance assez poussée d’Angular et de RxJS. 

Exporté : librairie de composants

Si vous faites un composant d’interface réutilisable, vous devrez l’exporter. C’est notamment le cas si vous faites une librairie de composants via ng g library.

La raison ? Par défaut, les composants Angular ont une portée limitée au module dans lequel ils sont déclarés. Comme une librairie de composants sera réutilisée dans un autre module, la portée doit être étendue.

Par ailleurs, un composant réutilisable devrait être pur. Sinon, cela veut dire qu’il n’est pas générique (par exemple, si vous faites une requête HTTP pour récupérer des données, l’URL de l’API ne sera pas la même d’un projet à l’autre).

ng g component test --exported --change-detection OnPush

Runtime : composants créés à l’exécution

La plupart du temps, Angular détecte et enregistre vos composants par lui-même, car ils sont soit associés à une route (pages), soit utilisés quelque part dans un template (composants de pure présentation).

Mais si vous utilisez des librairies de composants comme Material ou Ionic, vous utiliserez parfois des composants instanciés à l’exécution : ce sont les modals, dialogs, popovers, etc.

Si vous voulez qu’ils fonctionnent dans le mode pré-Ivy (c’est-à-dire Angular <= 7, Angular 8 avec la config par défaut ou Angular 9 avec Ivy désactivé), vous devez les enregistrer auprès d’Angular en tant que entry components.

ng g component test --entry-component --skip-selector

Avec Ivy (c’est-à-dire Angular >= 9 avec la config par défaut ou Angular 8 avec Ivy activé manuellement), cela n’est plus nécessaire et cette option est dépréciée, l’extension ne vous la proposera donc pas si votre application est en mode Ivy.

Dans tous les cas, tout comme les pages, les modals et dialogs n’ont pas besoin d’un sélecteur.

Angular Element : Web Component natif

C’est en beta pour l’instant, mais vous pouvez désormais créer des Angular Elements. Ce sont des composants développés avec la syntaxe et l’outillage puissants d’Angular, mais compilés en Web Components natifs. Ils sont ainsi réutilisables dans n’importe quel projet, quel qu’en soit le framework. C’est un outil similaire à Stencil ou Polymer/LitElement.

2 caractéristiques :

  • ils seront utilisés à l’exécution, ils doivent donc être enregistrés comme entry components,
  • comme le code final sera du JavaScript natif, ils doivent utiliser l’encapsulation native, appelée ShadowDom, plutôt que celle d’Angular. A noter que le ShadowDom ne fonctionne pas dans Internet Explorer / Edge (pré-Chromium).
ng g component test --entry-component --view-encapsulation ShadowDom

Types de composants dans Angular 9

Angular CLI 9 ajoute une nouvelle option lors de la génération d’un composant pour en choisir le type :

ng g component test –type page

Cela modifiera le suffixe du composant, c’est-à-dire que cela créera une classe TestPage dans le fichier test.page.ts (au lieu d’une classe TestComponent dans le fichier test.component.ts).

Vous devez autoriser les nouveaux suffixes dans la configuration tslint.json racine. Par exemple :

"component-class-suffix": [true, "Component", "Page", "Modal"]

Tada ! Si vous utilisez l’extension Angular Schematics pour Visual Studio Code, tout devient très simple :

  • l’extension détectera vos suffixes dans tslint.json et les ajoutera à la liste de choix de types de composants,
  • ajoutera pour vous l’option --type dans la commande du CLI,
  • et préselectionnera les options recommandées que nous venons de voir en fonction du type de composant !

Vous pouvez même personnaliser le fonctionnement (voir le README de l’extension).

Devenez un Pro!

Vous aimez l’extension Angular Schematics pour VS Code, et vous voulez soutenir mes contributions open source tout en vous aidant vous-même? Une version étendue est disponible : Schematics Pro. Elle contient :

  • des fonctionnalités encore plus avancées pour Angular
  • la génération de code pour les autres frameworks également : React, Vue, Ionic, Svelte, Stencil, Lit, Nest et plus encore
  • la création rapide et facile de modèles de code personnalisés

En savoir plus sur Schematics Pro

Découvrez la formation Angular