Angular Lifecycle Hooks

When angular application runs and it finds a selector of a component class it will instantiate that component class and render it in the DOM. In order to instantiate this class it will call its constructor. Every time this component selector is encountered, a new instance of this component class will be created.

When the constructor of this component is called only its properties are initialized, the view for this component is not yet rendered so none of it’s properties decorated with @Input are updated or available to use, projected contents are also not available.

Get Archana’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Angular invokes various methods on a directive or component, as it creates, changes and destroys them. Once this component is created it will go through various phases before it is destroyed. These methods are known as the Angular lifecycle hooks.

Angular Lifecycle Hooks

Lifecycle hooks in Angular are special methods that are executed at specific points during the lifecycle of a component or directive. These hooks include:

• ngOnChanges(): Angular invokes ngOnChanges() lifecycle hook at the start, when a new component is created. It also gets executed every time any property decorated with @Input is updated. ngOnChanges() hook is not fired if the change detection cycle does not find any change in any of the @Input decorated properties.
• ngOnInit(): Angular invokes ngOnInit() lifecycle hook after ngOnChanges(). But unlike ngOnChanges() it is fired only once during the first change detection cycle. After that, if any of the @Input properties change, this hook does not get called. At this point, the view is not rendered yet so none of the child components or projected contents are available. Hence any property decorated with @ViewChild, @ViewChildren, @ContentChild, @ContentChildren will not be available for use.
• ngDoCheck(): ngDoCheck() detects change in any element, content or view. Angular invokes ngDoCheck() lifecycle hook after ngOnChanges() and ngOnInit(). Unlike ngOnInit() and ngOnChanges(), this hook is called every time change detection cycle runs. So this is a great place to use when you want to execute any code on every change detection cycle.
• ngAfterContentInit(): ngAfterContentInit() lifecycle hook get’s called after the component’s projected content has been fully initialized. The properties decorated with @ContentChild and @ContentChildren decorator are updated just before this hook is called. This is a component only hook and is not available for directives.
• ngAfterContentChecked(): This hook gets called only during the change detection cycle after the projected content has been initialized. For change detection cycles that occur before the projected content has been initialized, this hook will not get called. Only after this method is executed, the updated projected content will be available. This is a component only hook and is not available for directives.
• ngAfterViewInit(): After the component’s view template and all it’s child component’s view templates are fully initialized and after all lifecycle hooks of it’s child components and directives are executed. This hook is called once during the first change detection cycle, when Angular initializes the view for the first time. Angular also updates the properties decorated with @ViewChild and @ViewChildren before calling ngAfterViewInit() method. ngAfterViewInit() is a component only hook, and is not available for directives.
• ngAfterViewChecked(): During the first change detection cycle, this hook gets called after ngAfterViewInit() has executed and then is fired every time change detection cycle runs, even if view has not changed. Angular checks and updates properties decorated with @ViewChild and @ViewChildren before this lifecycle hook is called. This is a component only hook and is not available for directives.
• ngOnDestroy(): This is the last lifecycle hook of a component or a directive. Angular fires ngOnDestroy() method just before component or directive get’s destroyed. This is a great place to do some cleanup work, like unsubscribe from an observable or detach event handler etc.,

Conclusion

Lifecycle hooks are an important feature in Angular. Understanding and utilizing these hooks is an important aspect of building robust and efficient Angular applications.