0
0
Angularframework~5 mins

Lifecycle execution order mental model in Angular - Cheat Sheet & Quick Revision

Choose your learning style9 modes available
Recall & Review
beginner
What is the first lifecycle hook called when an Angular component is created?
The first lifecycle hook called is ngOnChanges if the component has input properties. Otherwise, ngOnInit is called next.
Click to reveal answer
intermediate
Order these Angular lifecycle hooks in the sequence they are called during component creation: ngOnInit, ngOnChanges, ngDoCheck.
The order is: <br>1. ngOnChanges (called when input properties change)<br>2. ngOnInit (called once after first ngOnChanges)<br>3. ngDoCheck (called after ngOnChanges and ngOnInit for custom change detection)
Click to reveal answer
beginner
What lifecycle hook is called just before Angular destroys a component?
The ngOnDestroy hook is called just before Angular removes the component from the DOM. It is used to clean up resources like subscriptions.
Click to reveal answer
intermediate
Explain the purpose of ngAfterViewInit in Angular lifecycle.
ngAfterViewInit runs after Angular initializes the component's views and child views. It is useful to access or manipulate the DOM elements after they are rendered.
Click to reveal answer
advanced
Which lifecycle hooks run every time Angular runs change detection?
The hooks ngOnChanges (if inputs changed) and ngDoCheck run every change detection cycle. They help detect and respond to data changes.
Click to reveal answer
Which lifecycle hook is called only once after the first ngOnChanges?
AngDoCheck
BngOnInit
CngAfterViewInit
DngOnDestroy
When is ngOnDestroy called in Angular?
ABefore component destruction
BAfter every change detection
CAfter component initialization
DBefore ngOnInit
Which hook allows you to act after the component's child views are initialized?
AngOnDestroy
BngOnChanges
CngDoCheck
DngAfterViewInit
What triggers ngOnChanges to run?
AWhen input properties change
BAny change detection cycle
CWhen the component is destroyed
DAfter view initialization
Which lifecycle hook is best for custom change detection logic?
AngOnInit
BngOnChanges
CngDoCheck
DngAfterViewInit
Describe the order of Angular lifecycle hooks from component creation to destruction.
Think about what happens when a component starts, updates, and ends.
You got /5 concepts.
    Explain when and why you would use ngOnDestroy in an Angular component.
    Consider what happens when a component is removed from the page.
    You got /4 concepts.