6-3 Créer un composant (projet-liste)

On peut s'amuser longtemps dans le composant App, mais il serait intéressant de faire quelque chose d'utile et d'ajouter un composant pour supporter les fonctionnalités requises de notre application.

Une de ces fonctionnalités est d'être en mesure d'afficher des projets. Ainsi, créons un composant pour lister des projets!

Créer un composant ProjetsListe

Nous allons créer un composant pour afficher une liste de projets. Cette liste ne viendra pas de l'API pour le moment, mais permettra d'explorer le concept de composants.

Pour créer un composant, Angular CLI offre la commande ng generate component.

Cette commande prend en argument le nom du composant, incluant optionnellement le chemin relatif au projet (dossier dans lequel mettre le composant).

Une bonne pratique est de classer les composants par rôle ou domaine d'application. Si on met tous les composants dans le même dossier et au même niveau, cela peut rapidement devenir pêle-mêle et très difficile à suivre.

Créer le composant

Utilisez la commande generate component de l'outil CLI d'Angular pour créer un composant appelé projets-liste (vous pouvez utiliser l'invite de commande de WebStorm):

ng generate component projets-liste

Vous verrez apparaître en console:

CREATE src/app/projets-liste.ts (215 bytes)

À propos de cette commande:

• ng permets d'appeler l'application Angular CLI
• generate permets de générer un certain type de fichier. La commande peut être utilisée pour générer autre chose que des composantes.
• component indique qu'on veut générer un composant
• projets-liste le nom du composant (projets-liste). Il aurait été possible de préciser un chemin relatif si nous avions voulu mettre le composant dans un sous-dossier. Par exemple projets/projets-liste. Nous utiliserons les sous-dossiers plus tard.

Cela devrait vous avoir généré le fichier suivant:

src/app/projets-liste.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-projets-liste',
  imports: [],
  template: `
    <p>
      projets-liste works!
    </p>
  `,
  styles: ``
})
export class ProjetsListe {

}

Vous venez de créer votre premier composant! 🎉

Voyons à l'étape suivante comment utiliser le composant.