Aller au contenu principal

6-4 Utiliser le composant

Nous avons un composant tout neuf (ProjetsListe), mais il se sent un peu seul.

Pour utiliser un composant à l'intérieur de l'application, il suffit d'y faire référence à l'aide d'une balise HTML portant le nom de l'attribut selector du composant.

Dans le cas qui nous occupe, le sélecteur du composant est le suivant:

src/app/projets-liste.ts
@Component({
  selector: 'app-projets-liste',
  imports: [],
//...

Cela veut dire que nous pourrons intégrer le composant dans l'application via la balise <app-projets-liste></app-projets-liste>.

Intégrer ProjetsListe à App​

Pour l'instant App est le composant d'entré de l'application et donc représente notre page d'accueil. Utilisons cette dernière pour faire afficher ProjetsListe

  1. Dans le composant App, ajoutez la balise <app-projets-liste>, juste en dessous du titre h1. Commencez à taper le nom du composant et vous devriez voir apparaitre une liste de suggestions. img
  2. Sélectionnez app-projets-liste dans le menu déroulant. WebStorm vous demandera de confirmer la ressource à importer. Confirmez en sélectionnant l'option présentée. img
  3. Cela ajoutera à votre liste d'importation la composant 
    @Component({
    selector: 'app-root',
    imports: [RouterOutlet, ProjetsListe],
  4. Assurez-vous de fermer la balise correctement, autrement vous aurez une erreur 
    //...
    template: `
        <h1>{{ title() }}!</h1>
        <app-projets-liste></app-projets-liste>
  5. Utilisez votre navigateur pour constater le changement dans la page
    http://localhost:4200

Vous venez tout juste de faire afficher un nouveau composant!

party