Component Lifecycle in Angular
The component lifecycle is the sequence of steps that occur between the creation of a component and its destruction. Each step allows you to perform specific operations at the right moment.
Component Lifecycle Phases
1. Creation Phase
constructor
The constructor is a built-in JavaScript method called when a new instance of a class is created. In Angular, the constructor is called before any lifecycle hooks and is used to initialize component properties and inject dependencies.
2. Change Detection Phase
ngOnInit
The ngOnInit method runs after Angular has initialized all of the component’s input properties with their initial values. It is executed only once. This step happens before the component’s template is rendered. It’s a good place to load data and configure the component’s initial state.
ngOnChanges
The ngOnChanges method is called whenever any input property of the component changes. It is triggered before the component’s template is checked, allowing you to update the component’s state based on initial or updated inputs. During initialization, ngOnChanges is executed before ngOnInit.
ngDoCheck
The ngDoCheck method is called every time Angular performs change detection. You can use it to implement custom change detection logic.
ngAfterContentInit
The ngAfterContentInit method is called once after the component’s projected content has been initialized.
Get Błażej Skrzypniak’s stories in your inbox
Join Medium for free to get updates from this writer.
ngAfterContentChecked
The ngAfterContentChecked lifecycle hook is called after each change detection cycle when the component’s content is checked. It runs after ngAfterContentInit and after each subsequent ngOnChanges.
ngAfterViewInit
The ngAfterViewInit method is executed once after the component’s view has been initialized.
ngAfterViewChecked
The ngAfterViewChecked lifecycle hook is called after each change detection cycle when the component’s view has been checked. It runs after ngAfterViewInit and after each subsequent ngOnChanges. This method is executed very frequently and can significantly impact performance.
3. Rendering Phase
afterNextRender
The afterNextRender function is called after the component has finished rendering. It allows you to perform DOM operations.
afterRender
The afterRender function is called after each change detection cycle, once all components have been rendered to the DOM.
4. Destruction Phase
ngOnDestroy
The ngOnDestroy method is called once, right before the component is destroyed. It is used to release resources and cancel subscriptions.
Summary
Angular lifecycle hooks give you greater control over the lifecycle of your components, which is especially important in more complex applications. They allow you to initialize data, react to changes, and handle cleanup and optimization — all of which improve application performance.
Did you learn something new?
👉 If so please, clap 👏 button multiple times below so more people can see this!
Oh, by the way!
If you’d like to explore a working example repository, feel free to visit my GitHub!
