What is the life cycle of an Angular 17 component?
A component's lifecycle is the sequence of steps that happen between the component's creation and its destruction. Each step represents a different part of Angular's process for rendering components and checking them for updates over time.
4 Phases are:
Phase 1 -
Creation:
Constructor: - Standard JavaScript
class constructor. Runs when Angular instantiates the component.
Phase 2 -
Change Detection: ngOnInit: - Runs once after Angular has initialized all the component's inputs.
Phase 3 -
Rendering: -
ngOnChanges:- Runs every time the
component's inputs have changed.
ngDoCheck:- Runs every time this
component is checked for changes.
ngAfterViewInit:- Runs once after
the component's view has been initialized.
ngAfterContentInit:- Runs once
after the component's content has been initialized.
ngAfterViewChecked:- Runs every
time the component's view has been checked for changes.
ngAfterContentChecked:- Runs every
time this component content has been checked for changes.
afterNextRender:- Runs once the
next time that **all* components have been rendered to the DOM.
afterRender:- Runs every time all components have been rendered to the DOM.
Phase 4 -
Destruction:
ngOnDestroy:- Runs once before the
component is destroyed.
This is the YouTube video link for this: - https://youtu.be/AFWsRWnbC-Q
