Skip to main content

Lab 7: Lifecycle Hooks

Objectives​

  • Move code from the constructor to ngOnInit

Instructions​

Step 3: Identify the Problem:​

  • In album.component.ts, add a console.log for the album variable.
  • Notice that album shows undefined even though there is an album in the input.

Step 2: Move the Code from the Constructor to ngOnInit​

  • Move the constructor content into ngOnInit and remove the constructor.
  • Do the same for the album-list.component.ts and album-of-the-day.component.ts components.
  • Verify that everything works correctly.

Step 3: Fix errors​

  • You can see now that your IDE is showing you some errors:
  • Here is an example with IntelliJ IDEA: Component tree
  • We need to tell the IDE that the albums variable will be initialized in the ngOnInit method.
  • To do so, we can use the ! operator to tell the IDE that the variable will be initialized later.
   albumOfTheDay!: Album