Component lifecycle overview in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the Angular component lifecycle?

It manages the different stages a component goes through from creation to destruction, allowing you to run code at specific moments.

beginner

Name the lifecycle hook that runs once after the component's data-bound properties are initialized.

ngOnInit() runs once after input properties are set, perfect for initialization tasks.

beginner

Which lifecycle hook is called before Angular destroys a component?

ngOnDestroy() is called just before the component is removed, useful for cleanup like unsubscribing.

intermediate

What does the ngOnChanges() hook do?

It runs whenever input properties change, letting you react to those changes.

intermediate

Why is ngAfterViewInit() important?

It runs after Angular fully initializes the component's view, so you can safely access child elements or components.

Which lifecycle hook is called only once after component inputs are set?

A ngAfterViewInit()

B ngOnDestroy()

C ngOnChanges()

D ngOnInit()

ngOnInit() runs once after inputs are initialized.

When is ngOnDestroy() called?

A Before component removal

B After component view initialization

C Before component creation

D When input properties change

ngOnDestroy() runs just before the component is removed.

What does ngOnChanges() detect?

A Component destruction

B Changes in input properties

C View initialization

D Component creation

ngOnChanges() runs when input properties change.

Which hook lets you access child components after the view is ready?

A ngAfterViewInit()

B ngOnChanges()

C ngOnDestroy()

D ngOnInit()

ngAfterViewInit() runs after the component's view is fully initialized.

Why use lifecycle hooks in Angular?

A To style components

B To write HTML templates

C To manage component stages and run code at key moments

D To create new components

Lifecycle hooks help manage component stages and run code at important times.

Explain the main Angular component lifecycle hooks and when they run.

Think about the component's journey from creation to destruction.

Describe a real-life scenario where you would use ngOnDestroy() in an Angular component.

Consider what happens when a component is no longer needed.