# LifeCycle Hooks

Angular allows us to define some functions for a component that it will invoke at various major milestones of the component's life cycle as it gets created, changed or destroyed. Below are the lifecycle hooks that Angular allows us to define:

## 1. ngOnChanges:

This function would be called whenever there is change detected in one of the input data-bound property. To get a data passed on from its parent component, the child component class would have some properties declared with `@Input` decorator. `ngOnChanges` is invoked in the child component, whenever a change occurs to the value of these input bound properties on the parent component.

This hook would also be called before the data property is initialized i.e. before the `ngOnInit` hook.

The callback function for this hook would receive a `SimpleChanges` object that contains the **previous** and **current** values of the inputs properties.

As this hook gets called very often, you should keep the code in this hook at minimum possible to not let the performance of the app impacted.

## 2. ngOnInit:

This hook is called after the first `ngOnChanges`, when the component is ready with its initial state and has received initial values of its input data-bound properties.

This hook is used to add any code that should execute once the component has initialized.

This hook is fired only once

This hook is fired before any of the child directive properties are initialized.

## 3. ngDoCheck:

This hook would be called during every change detection run, after `ngOnChanges()` and `ngOnInit()`. Implement this hook if you are changing something in your component that Angular won't be able to detect on its own.

Below are the other lifecycle hooks that Angular allows us to define and the sequence in which they happen: (referenced from [https://angular.io/guide/lifecycle-hooks](https://angular.io/guide/lifecycle-hooks) )

| Hook                    | Purpose and Timing                                                                                                                                                                                               |
| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ngAfterContentInit()    | <p>Respond after Angular projects external content into the component's view.<br>Called once after the first <code>ngDoCheck()</code>.<br>A component-only hook.</p>                                             |
| ngAfterContentChecked() | <p>Respond after Angular checks the content projected into the component.<br>Called after the <code>ngAfterContentInit()</code> and every subsequent <code>ngDoCheck()</code>.<br>A component-only hook.</p>     |
| ngAfterViewInit()       | <p>Respond after Angular initializes the component's views and child views.<br>Called once after the first <code>ngAfterContentChecked()</code>.<br>A component-only hook.</p>                                   |
| ngAfterViewChecked()    | <p>Respond after Angular checks the component's views and child views.<br>Called after the <code>ngAfterViewInit</code> and every subsequent <code>ngAfterContentChecked()</code>.<br>A component-only hook.</p> |
| ngOnDestroy             | <p>Cleanup just before Angular destroys the directive/component. Unsubscribe Observables and detach event handlers to avoid memory leaks.<br>Called just before Angular destroys the directive/component.</p>    |
