Aller au contenu principal

TP 4 : Input & Output

Objectifs​

  • Utiliser les décorateurs Input et Output pour passer des données entre composants

Instructions​

Notre application a quelques petits ajustements que nous pouvons ajouter :

  • Étape 1 : Le titre de notre application peut être passé à notre en-tête et pied de page afin qu'il soit affiché dans les deux endroits.
  • Étape 2 : Nous aimerions avoir un composant album qui affichera les détails d'un album. Ce composant recevra un objet album en entrée et affichera les informations de cet album.
  • Étape 3 : Actuellement, le lien pour masquer le composant album-of-the-day se trouve dans le app.component.ts. Nous voulons avoir une icône [x] à l'intérieur du composant album-of-the-day qui émettra un événement au composant parent pour masquer l'album du jour.

Étape 1 : Passer le titre à l'en-tête et au pied de page​

  • Dans le composant app.component.ts, créez une variable appelée title et donnez-lui la valeur My Music App.
  • Créez une entrée dans les composants header et footer pour recevoir la variable title.
  • Passez la variable title aux composants header et footer afin qu'elle soit affichée dans les deux endroits.
  • L'affichage de l'en-tête devrait ressembler à ceci :
  <app-header [title]="title"/>

Étape 2 : Créer un composant album​

  • Créez un nouveau composant appelé album.
  • Dans le composant album, créez une variable appelée @Input() album: Album;.
  • Dans la boucle du album-list-component, passez l'objet album au composant album.

[ASTUCE] Vous pouvez aussi directement faire la boucle sur une balise de composant!

Étape 3 : Émettre une valeur​

  • Dans le composant album-of-the-day, créez une variable appelée @Output() notifyParentToClose = new EventEmitter<boolean>();.
  • Créez une méthode appelée closeAlbumOfTheDay() qui émet l'événement notifyParentToClose.
  • Dans le fichier app.component.html, écoutez l'événement hideAlbum et masquez le composant album-of-the-day.