Project 27: To-Do List UI

Angular Engineer

Builds on these lessons

Component Task

Objective

ngOnChanges fires whenever an @Input value changes (before ngOnInit on first render), while ngOnDestroy is the last hook to run before Angular removes the component.

You're building a to-do list item.

Task: write a TodoItemComponent with an @Input() label that implements ngOnChanges, ngOnInit, and ngOnDestroy, each logging a message.

component.ts

import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-todo-item',
  standalone: true,
  template: `<li>{{ label }}</li>`
})
export class TodoItemComponent implements OnChanges, OnInit, OnDestroy {
  @Input() label = '';

  ngOnChanges(changes: SimpleChanges) {
    console.log('label changed to', changes['label']?.currentValue);
  }

  ngOnInit() {
    console.log('TodoItemComponent initialized');
  }

  ngOnDestroy() {
    console.log('TodoItemComponent destroyed');
  }
}

* Hint: Correct characters turn green, incorrect ones turn red.

Compiler Output

🅰️

Compile your component to see the result

← Previous Next →