@Component
, on découvre une fonctionnalité importante du langage TypeScript : les décorateurs.Définition et syntaxe d’un décorateur
Un décorateur permet d’ajouter un comportement spécial ou des métadonnées à un élément du code.
En TypeScript et dans Angular plus spécifiquement, les décorateurs doivent respecter certains points de syntaxe :
- Un décorateur commence toujours par le symbole
@
, suivi du nom du décorateur et d’une paire de parenthèses :@Component()
,@Injectable()
,@Input()
… Les parenthèses sont obligatoires, même si on ne passe pas de paramètre(s) au décorateur. - Un décorateur doit être positionné juste au-dessus ou à gauche de l’élément qu’il décore. L’élément décoré peut être une classe, une propriété ou méthode de classe, ou un paramètre de méthode.
- Certains décorateurs reçoivent un objet de configuration en paramètre, d’autres pas. Ne pas oublier les parenthèses après le nom du décorateur, même si le décorateur ne prend pas de paramètres.
Notez enfin que même si la syntaxe générale des décorateurs est fournie par le langage TypeScript, les décorateurs spécifiques qu’on utilise sont fournis par Angular. Il faut donc toujours les importer avant de pouvoir les utiliser :
import { Component } from '@angular/core';
Exemples du décorateur @Component
Le décorateur @Component
permet de transformer une simple classe TypeScript en composant Angular, et de définir les paramètres du composant comme son sélecteur et son template.
import { Component } from '@angular/core';
@Component({
selector: 'app-meteo',
templateUrl: './meteo.component.html'
})
export class AppComponent { }
On voit que tous les points de syntaxe ont bien été respectés :
- Le symbole
Component
a été importé de “@angular/core”. - Le décorateur
@Component
porte sur la classeAppComponent
, car il est situé juste au-dessus d’elle dans le code. Il ne faut donc surtout pas mettre de code entre le décorateur et la classe, sinon l’association serait cassée. - Le décorateur
@Component
prend en paramètre un objet dont les propriétés sont imposées par Angular. Dans l’exemple, cet objet a les propriétésselector
ettemplateUrl
, mais la documentation de @Component montre que de nombreuses autres propriétés sont supportées.