Component Lifecycle

A component has a lifecycle managed by Angular itself. Angular manages creation, rendering, data-bound properties etc. It also offers hooks that allow us to respond to key lifecycle events.

Here is the complete lifecycle hook interface inventory:

• ngOnChanges - called when an input binding value changes

• ngOnInit - after the first ngOnChanges

• ngDoCheck - after every run of change detection

• ngAfterContentInit - after component content initialized

• ngAfterContentChecked - after every check of component content

• ngAfterViewInit - after component's view(s) are initialized

• ngAfterViewChecked - after every check of a component's view(s)

• ngOnDestroy - just before the component is destroyed

📄 from View Lifecycle Hooks in Action