The eight essential Angular lifecycle hooks

ngOnChanges

ngOnInit

ngDoCheck

ngAfterContentInit

ngAfterContentChecked

ngAfterViewInit

ngAfterViewChecked

ngOnDestroy

ngOnChanges

Every time an input property is changed, this hook is triggered.

ngOnInit

The ngOnInit lifecycle hook, called after the constructor, is the recommended place for initializing your component.

ngDoCheck

This hook runs constantly, during every change detection cycle, allowing for custom logic to detect changes.

ngAfterContentInit

After the component's content has been initialized, this lifecycle hook is executed. Any setup not yet completed for the component's content can be performed here.

ngAfterContentChecked

This hook comes after the component's content has been checked, at which point you can do more operations on it.

ngAfterViewInit

This hook fires when the component's view is ready, allowing you to interact with the view elements in your code.

ngAfterViewChecked

After the component's view has been checked, this lifecycle hook is executed, and is where further actions related to the component's view should be performed.

ngOnDestroy

The ngOnDestroy lifecycle hook fires just before the component is destroyed. It’s where you can clean up the component.

2X faster app development!

Syncfusion offers over 1,800 components and frameworks for WinForms, WPF, ASP.NET (MVC, Core), UWP, WinUI, .NET MAUI, Xamarin, Flutter, Blazor, JavaScript, Angular, Vue, and React that make developers’ work easier.

No credit card required.