Afficher un composant Angular

Il ne suffit pas de créer un composant pour qu’il soit affichable via son sélecteur. Il ne faut pas oublier de le déclarer, sinon vous risquez d’obtenir l’erreur “Template parse errors: ‘my-comp’ is not a known element”.

1. Déclarer un composant

Pour déclarer un composant existant, il faut lister la classe de ce composant dans la propriété @NgModule.declarations du module Angular où il est utilisé.

Dans l’exemple qui suit, on déclare le composant MeteoComponent dans le module AppModule :

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppComponent, MeteoComponent ],  // Déclaration de MeteoComponent
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Par défaut, un composant n’est utilisable que dans les autres composants du module où il est déclaré. Dans notre exemple, MeteoComponent ne peut être affiché que dans le template de AppComponent, puisque c’est le seul autre composant appartenant à AppModule.

Si vous tentez d’utiliser un composant sans l’avoir déclaré, vous obtiendrez l’#9 Erreur “Template parse errors: ‘my-comp’ is not a known element”. Il existe également une technique pour afficher un composant en dehors de son module de déclaration.

2. Afficher un composant

Une fois déclaré dans un module, un composant peut être affiché dans tous les autres composants de ce module, en écrivant son sélecteur entre les symboles < et >, comme une balise HTML :

<!-- app.component.html -->
<nav>...</nav>
<div class="container">
  <meteo></meteo>  <!-- Voici notre composant -->
</div>
<footer>...</footer>

Pensez bien à toujours mettre la balise fermante quand vous affichez un composant via sa balise :

<!-- CORRECT -->
<meteo></meteo>

<!-- INCORRECT -->
<meteo>

<!-- INCORRECT -->
<meteo />
Informations

Tags : components

Dernière mise à jour :

Auteur : AngularChef

Qualité : Bonne