Qu’est-ce qu’un composant Angular ? (syntaxe classe + template)

Définition

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

Un composant peut contenir :

  • Un bouton
  • Une image
  • Un menu de navigation
  • Une page entière

C’est VOUS qui définissez les composants de votre application. C’est donc vous qui décidez ce que vous mettez dedans. Un composant peut être très petit (par exemple, s’il ne contient qu’un bouton), très grand (par exemple, s’il contient une page entière), ou quelque part entre les deux.

Pour plus d’infos, voir Découper l’interface en composants (arbre des composants).

Syntaxe d’un composant : Classe + Template

Un composant Angular est constitué de deux parties :

  • La classe. C’est là qu’on trouve les données à afficher et la logique applicative.
  • Le template. C’est la partie du composant qui sera affichée à l’utilisateur.

Pour faire une analogie avec le pattern MVC (Model-View-Controller), on pourrait dire :

  • Classe ≈ Contrôleur.
  • Template ≈ Vue.

C’est juste une analogie, car la terminologie MVC n’est pas utilisée à propos d’Angular.

Pour vous montrer la syntaxe de la classe et du template, je vais prendre l’exemple d’un MeteoComponent qui servirait à afficher… la météo.

Classe de MeteoComponent (fichier meteo.component.ts) :

@Component({
  selector: 'meteo',
  templateUrl: './meteo.component.html'
})
export class MeteoComponent {
  weatherType = 'ensoleillé';
  refresh() {
    this.weatherType = 'pluvieux';
  }
}
  • La classe est décorée avec le décorateur @Component.
  • La propriété @Component.selector définit la balise HTML qui servira à afficher le composant.
  • La propriété @Component.templateUrl référence le fichier contenant le template du composant.
  • Dans cet exemple, la classe contient une propriété weatherType et une méthode refresh(), les deux public par défaut, qui sont accessibles depuis le template.

Template de MeteoComponent (fichier meteo.component.html) :

<div>
  <p>Le temps est : {{ weatherType }}</p>
  <button (click)="refresh()">Actualiser</button>
</div>
  • Le template contient un mélange de HTML standard et de syntaxes Angular.
  • Ici, les syntaxes Angular utilisées sont l’interpolation ({{ weatherType }}) et le binding de propriété ((click)="refresh()").
  • Notez que les syntaxes Angular ont accès à la propriété et la méthode publiques de la classe.

Un composant consiste donc généralement en deux fichiers distincts, la classe et le template. En général, on génère ces fichiers automatiquement avec le CLI. Vous pouvez aussi les créer manuellement, mais n’oubliez pas de respecter les conventions de nommage.

Affichage d’un composant

Pour afficher un composant, il suffit d’écrire une balise HTML nommée d’après son sélecteur :

<meteo></meteo>

Ne pas oublier de mettre la balise fermante. Les syntaxes qui suivent ne marchent pas :

<meteo>   <!-- NE MARCHE PAS -->
<meteo/>  <!-- NE MARCHE PAS --> 

Pour que le composant soit reconnu, il doit être listé dans la propriété NgModule.declarations d’un module.

@NgModule({
  // ...
  declarations: [AppComponent, MeteoComponent]
})
export class AppModule { }

Si vous avez créé le composant avec le CLI, il a été ajouté automatiquement aux declarations du module en cours.

Attention, cela dit, si vous déclarez un composant dans un ModuleA et que vous cherchez à l’afficher dans un ModuleB, il y a une technique particulière à appliquer. Voir Afficher le même composant dans plusieurs modules.