Créer un composant Angular (@Component)

Composant = Classe + Template

Un composant Angular est un bout d’interface de l’application.

Syntaxiquement, un composant est implémenté sous la forme d’une classe TypeScript associée à un template.

@Component({
  selector: 'meteo',
  template: '<p>Template du composant</p>'  // Template en ligne
})
export class MeteoComponent {
  // Classe du composant
}

Dans le décorateur @Component, la propriété selector définit comment ce composant sera affiché. Ici, un sélecteur “élément” est utilisé, ce qui signifie que ce composant sera affiché comme une balise HTML : <meteo></meteo>.

La propriété template permet d’associer la classe de composant à son template. Dans l’exemple, on a un template en ligne dans une simple chaîne de caractères, mais il est plus fréquent de placer le template dans son propre fichier grâce à la propriété templateUrl :

@Component({
  selector: 'meteo',
  templateUrl: './meteo.component.html'  // Template dans un fichier à part
})
export class MeteoComponent {
  // Classe du composant
}

Template de composant = HTML + Syntaxes Angular

Un template de composant contient essentiellement du HTML, dans lequel on a inséré des syntaxes Angular. Ces syntaxes permettent d’afficher des données dynamiquement, de modifier les attributs HTML ou d’associer des comportements aux balises HTML.

Si l’on reprend l’exemple du MeteoComponent ci-dessus, son template pourrait ressembler à ça :

<!-- meteo.component.html -->
<div class="meteo-widget">
  <p>Le temps est : {{ weatherType }}</p
  <img [src]="weatherImage">
  <button (click)="refresh()">Actualiser</button>
</div>

On reconnaît des balises HTML classiques (<div>, <img>…), mélangées avec des syntaxes Angular :

  • L’interpolation permet d’afficher du texte dynamiquement. Dans l’exemple, on affiche le temps qu’il fait : {{ weatherType }}
  • Le binding de propriété permet de modifier certaines propriétés du HTML. Dans l’exemple, on modifie la propriété “src” d’une image : <img [src]="weatherImage">
  • Le binding d’événement permet de réagir aux actions de l’utilisateur. Dans l’exemple, on déclenche une méthode refresh() au clic sur le bouton : <button (click)="refresh()">

Toutes ces syntaxes s’appuient sur la classe du composant, qui définit les données et les comportements utilisés dans le template.

Classe de composant = Données + Comportement

Une classe de composant contient tout ce qui permet au template de s’afficher et de fonctionner correctement :

  • Les propriétés (publiques) de la classe contiennent les données utilisées pour générer l’affichage.
  • Les méthodes (publiques) de la classe implémentent les comportements permettant de réagir aux actions de l’utilisateur.

Si l’on reprend notre exemple précédent, la classe doit contenir les propriétés weatherType et weatherImage, et la méthode refresh().

@Component({...})
export class MeteoComponent {

  weatherType = 'ensoleillé';
  weatherImage = '/images/sunny.png';

  refresh() {
    this.weatherType = 'nuageux';
    this.weatherImage = '/images/cloudy.png';
  }
}
Informations

Tags : components

Dernière mise à jour :

Auteur : AngularChef

Qualité : Bonne