Liste des propriétés du décorateur @Component

Le décorateur @Component permet de transformer une simple classe TypeScript en composant Angular. Cette recette liste toutes les propriétés qu’on peut passer à ce décorateur.

selector

Définit la syntaxe qui va activer l’affichage du composant ou de la directive.

Pour un composant, on utilise généralement un selector “élément”, c’est à dire une simple chaîne de texte sans caractères spéciaux (les tirets sont autorisés) :

@Component({
  selector: 'meteo',
  template: '...'
})
export class MeteoComponent { }

Un tel composant s’affiche comme une balise HTML (ne pas oublier la balise fermante qui est obligatoire) :

<meteo></meteo>

Pour une directive, on utilise généralement un selector “atribut”, c’est à dire une chaîne de texte entre crochets :

@Directive({
  selector: '[adminOnly]',  // Notez les crochets [...]
  template: '...'
})
export class AdminDirective { }

Une telle directive s’affiche comme un attribut HTML :

<p adminOnly>Texte du paragraphe</p>

template et templateUrl

Permet d’associer un template au composant :

  • template : Chaîne de caractère contenant le template du composant. (On utilise souvent un template-chaîne.)
  • templateUrl : Chemin d’un fichier .html distinct contenant le template du composant.

styles et styleUrls

Permet d’associer des styles CSS au composant :

  • styles : Tableau de chaînes de caractères contenant les styles CSS à appliquer au composant. (On utilise souvent un template-chaîne.)
  • templateUrl : Tableau de chemins de fichiers .css contenant les styles CSS à appliquer au composant.

providers

Permet de déclarer des providers qui ne seront injectables que dans le composant en cours et ses enfants. Voir #55 Déclarer une dépendance / un provider.

Informations

Tags : components

Dernière mise à jour :

Auteur : AngularChef

Qualité : Pas finalisé