14-1 Décorateur Output()

Pour communiquer de l'information avec le composant parent, un composant enfant doit envoyer un événement au parent.

Le parent pourra ainsi traiter l'information via une fonction réagissant à l'événement.

Notre cas de figure: Supprimer un projet de la liste et envoyer un événement à ProjetsIndex pour qu'il le retire du tableau.

Ajouter une sortie @Output() à ProjetsListe

Premièrement, ajoutons une sortie à ProjetsListe qui sera responsable d'émettre un événement lorsqu'on veut supprimer un projet.

1. Pour déclarer un événement via @Output, on utilise @Output() et on donne un nom à l'événement.
   src/app/features/projets/components/projets-liste.ts

   export class ProjetsListe {
     @Input() projets: Projet[] | null = null
     @Output() projetDeleted
   }

2. Ensuite, le type est est EventEmitter qui lui-même transportera une valeur. Ici, on précisera le id du projet supprimé, soit number.
   src/app/features/projets/components/projets-liste.ts

   export class ProjetsListe {
     @Input() projets: Projet[] | null = null
     @Output() projetDeleted = new EventEmitter<number>
   }

Ajouter un bouton pour supprimer

Aux côtés de chaque projet, ajoutons un lien pour le supprimer:

template: `
  <a class="btn btn-primary" routerLink="/projets/creer">Nouveau projet</a>

  @if(projets && projets.length > 0){
  <ul>
    @for (projet of projets; track $index) {
      <li>
        {{ projet.nom }} <button class="btn btn-link text-danger btn-sm">Supprimer</button>
      </li>
    } @empty {
      <li>Aucun projet</li>
    }
  </ul>
  } @else {
    <p>Aucun projet</p>
  }
`,

Ajouter une fonction supprimerProjet()

Lorsque le boutton est cliqué, on appellera cette fonction.

1. Créez la fonction
   src/app/features/projets/components/projets-liste.ts

   export class ProjetsListe {
     @Input() projets: Projet[] | null = null
     @Output() projetDeleted = new EventEmitter<number>
     
     protected supprimerProjet() {
       
     }
   }

2. Liez la fonction au clic du bouton
   src/app/features/projets/components/projets-liste.ts

   <li>
     {{ projet.nom }} <button (click)="supprimerProjet()" class="btn btn-link text-danger btn-sm">Supprimer</button>
   </li>

3. Vérifiez que le tout fonctionne en affichant un message de confirmation

   export class ProjetsListe {
     @Input() projets: Projet[] | null = null
     @Output() projetDeleted = new EventEmitter<number>
   
     protected supprimerProjet() {
       const confirmation = confirm("Êtes-vous certain de vouloir supprimer de projet?");
     }
   }

Émettre l'événement

Pour émettre l'événement au composant parent, on appelle notre @Output() via la fonction emit().

src/app/features/projets/components/projets-liste.ts

export class ProjetsListe {
  @Input() projets: Projet[] | null = null
  @Output() projetDeleted = new EventEmitter<number>

  protected supprimerProjet() {
    const confirmation = confirm("Êtes-vous certain de vouloir supprimer de projet?");

    if(confirmation){
      this.projetDeleted.emit()
    }
  }

attention

Remarquez que la fonction emit() peut prendre une valeur en argument, soit le type number que nous avons précisé lors de la déclaration du @Output().

@Output() projetDeleted = new EventEmitter<number>

Passer une valeur à l'événement

Il nous faut, au clic du bouton, passer l'identifiant du projet à supprimer et ensuite l'envoyer avec l'événement!

1. Modifiez la fonction supprimerProjet() pour qu'elle accepte un number, soit l'identifiant du projet à supprimer.
   src/app/features/projets/components/projets-liste.ts

   protected supprimerProjet(projetId: number) {

2. Ensuite, lors du clic, passez le id du projet en question
   src/app/features/projets/components/projets-liste.ts

   <li>
     {{ projet.nom }} <button (click)="supprimerProjet(projet.id)" class="btn btn-link text-danger btn-sm">Supprimer</button>
   </li>

3. Finalement, envoyer le id avec l'événement lors de l'émissions!
   src/app/features/projets/components/projets-liste.ts

   protected supprimerProjet(projetId: number) {
     const confirmation = confirm("Êtes-vous certain de vouloir supprimer de projet?");
   
     if(confirmation){
       this.projetDeleted.emit(projetId)
     }
   }