Les propriétés output des composants

Quand vous travaillez avec des composants, il peut être nécessaire de notifier d'autres composants que quelque chose s'est produit. Par exemple, un bouton a été cliqué, un élément a été ajouté à une liste ou retiré, ou une autre mise à jour importante a eu lieu. Dans ce cas, les composants doivent communiquer avec leurs composants parents.

Angular utilise la fonction output() pour permettre ce type de comportement.

Dans cette activité, vous allez apprendre à utiliser la fonction output() pour communiquer avec les composants.

Pour créer le chemin de communication d'un composant enfant vers un composant parent, utilisez la fonction output pour initialiser une propriété de classe.

@Component({...})
class Child {
  incrementCountEvent = output<number>();
}

Le composant peut maintenant générer des événements que le composant parent peut écouter. Déclenchez des événements en appelant la méthode emit :

class Child {
  ...

  onClick() {
    this.count++;
    this.incrementCountEvent.emit(this.count);
  }
}

La fonction emit génère un événement du même type que celui défini par l'output.

À vous d'essayer. Complétez le code en suivant ces tâches :

1. Ajouter une propriété output()

   Mettez à jour child.ts en ajoutant une propriété output nommée addItemEvent ; pensez à définir le type de l'output à string.

2. Compléter la méthode addItem

   Dans child.ts, mettez à jour la méthode addItem ; utilisez le code suivant comme logique :

   child.ts

   addItem() {
     this.addItemEvent.emit('🐢');
   }

3. Mettre à jour le template de App

   Dans app.ts, mettez à jour le template pour écouter l'événement émis en ajoutant le code suivant :

   <app-child (addItemEvent)="addItem($event)" />

   Désormais, le bouton « Add Item » ajoute un nouvel élément à la liste à chaque clic.

Bravo, vous avez maintenant terminé les fondamentaux des composants : impressionnant 👏

Continuez votre apprentissage pour découvrir d'autres fonctionnalités formidables d'Angular.