Aller au contenu principal

14-2 Répondre à l'événement

Maintenant, il nous suffit de répondre à l'événement dans ProjetsIndex.

Pour répondre à l'événement, on doit lier ce dernier à une fonction locale du composant parent (ProjetsIndex).

On fait cela via la balise du composant à l'origine de l'événement.

Gestion de l'événement​

  1. Ajoutez une fonction dans ProjetsIndex responable de gérer l'événement de suppression.

    src/app/features/projets/pages/projets-index.ts
    export class ProjetsIndex implements OnInit {
      protected projets: Projet[] | null = null

      constructor(private projetService: ProjetService) {}

      async ngOnInit(): Promise<void> {
        this.projets = await this.projetService.obtenirTous();
      }
      
      protected gestionProjetDeleted() {
        
      }
    }

  2. Lier l'événement à la fonction

    @Component({
      selector: 'app-projets-index',
      imports: [
        ProjetsListe
      ],
      template: `
        <h1>Projets</h1>
        <app-projets-liste [projets]="projets" (projetDeleted)="gestionProjetDeleted()"></app-projets-liste>
      `,
      styles: ``
    })
    info

    (projetDeleted) est l'événement du composant enfant, au même titre qu'on pourrait réagir à (click) si c'était un bouton!

    gestionProjetDeleted() est notre fonction locale.

  3. Accepter le détail (valeur) de l'événement. Pour cela, $event est utilisé afin d'indiquer qu'on veut passer le détail.

    src/app/features/projets/pages/projets-index.ts
    //...

    <app-projets-liste [projets]="projets" (projetDeleted)="gestionProjetDeleted($event)"></app-projets-liste>

    //...

    protected gestionProjetDeleted(projetId: number) {

    }

Tester que le lien enfant-parent fonctionne​

Testons que le tout fonctionne en affichant un message dans la console.

protected gestionProjetDeleted(projetId: number) {
  console.log(`Demande de suppression du projet ${projetId}`);
}

Cliquez sur le bouton Supprimer et une fois la confirmation faite, vous devriez voir dans la console du navigateur quelque chose comme ceci:

img

🎉