Skip to content
TreelevelTreelevelTreelevel Labs

Lab 7: Lifecycle Hooks

Objectives

Section titled “Objectives”
  • Move code from the constructor to ngOnInit

Instructions

Section titled “Instructions”

Step 3: Identify the Problem:

Section titled “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

Section titled “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

Section titled “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