Skip to main content

Lab 4: Input & Output

Objectives​

  • Use Input and Output decorators to pass data between components

Instructions​

Our application have some little adjustement we can add:\

  • Step 1: The title of our app can be passed to our header and foot so it is displayed in both places.
  • Step 2: We would like to have an album component that will display the album details. This component will receive an album object as an input and display the informations of an album
  • Step 3:Right now, the link to hide the album-of-the-day component is in the app.component.ts We want to have a [x] icon inside the album-of-the-day component that will emit an event to the parent component to hide the album of the day.

Step 1 - Pass the title to the header and footer​

  • In the app.component.ts component, create a variable called title and set it to My Music App.
  • Create an input in both the header and footer components to receive the title variable.
  • Pass the title variable to the header and footer components so it is displayed in both places.
  • Displaying the header should look like this:
  <app-header [title]="title"/>

Step 2 - Create an album component​

  • Create a new component called album.
  • In the album component, create a variable called @Input() album: Album;.
  • In the loop in the album-list-component pass the album object to the album component.

[HINT] You can also directly do the loop on a component tag!

Step 3: emit a value​

  • In the album-of-the-day component, create a variable called @Output() notifyParentToClose = new EventEmitter<boolean>();.
  • Create a method called closeAlbumOfTheDay() that emits the notifyParentToClose event.
  • In the app.component.html file, listen to the hideAlbum event and hide the album-of-the-day component.