Aller au contenu principal

20-1 Composant d'affichage des issues sur la page d'un projet

Pour afficher les issues de projet, on créera un composant acceptant en entrée (@Input()) un identifiant de projet.

  1. Créer le composant issues-list via Angular CLI **dans son propre dossier de feature. En effet, on parle d'une fonctionnalité distincte liée aux issues. Bien sûr que le tout est dans le contexte de projets, mais il s'agit d'une fonctionnalité distincte.

    ng g component features/issues/components/issues-liste
    info

    Les dossiers manquants seront créés automatiquement pour vous 🙂

  2. Ajouter le Input() pour le id de projet (projetId).

    src/app/features/issues/components/issues-liste.ts
    export class IssuesListe {
      @Input() projetId: string | null = null;
    }

  3. Modifier le contenu du composant afin d'afficher temporairement simplement l'identifiant du projet.

    src/app/features/issues/components/issues-liste.ts
    @Component({
      selector: 'app-issues-liste',
      imports: [],
      template: `
        <h2>Issues</h2>
        <p>La liste des issues pour le projet {{projetId}} sera affichée ici.</p>
      `,
      styles: ``
    })
    export class IssuesListe {
      @Input() projetId: number | null = null;
    }

  4. Préparer le terrain pour l'initialisation avec OnInit

    export class IssuesListe implements OnInit {
      @Input() projetId: number | null = null;

      async ngOnInit() {
        // Initialisation, ex.: appeler un service `IssueService` pour récupérer les issues du projet
      }
    }
    attention

    Dans un cas réel, on appelerait un service comme IssueService pour récupérer la liste des issues associées au projet.

  5. Intégrer issues-liste dans projet-detail.

    src/app/features/projets/pages/projet-detail.ts
    @Component({
      selector: 'app-projet-detail',
      imports: [
        RouterLink,
        IssuesListe
      ],
      template: `
        @if (projet) {
          <div class="row">
            <div class="col-lg-8">
              <h1>{{projet.nom}}</h1>
            </div>
            <div class="col-lg-4 d-flex align-items-center justify-content-lg-end">
              <a class="btn btn-secondary" [routerLink]="['/projets', projet.id, 'modifier']">Modifier</a>
            </div>
          </div>
          <div class="row mt-3">
            <div class="col">
              <p>{{projet.description}}</p>
            </div>
          </div>
          <div class="row mt-3">
            <div class="col">
              <app-issues-liste [projetId]="projet.id"></app-issues-liste>
            </div>
          </div>
        }
      `,
      styles: ``
    })

Vous devriez maintenant avoir quelque chose comme ceci lorsque vous vous rendez sur la page de détail d'un projet:

http://localhost:4200

img