What are the life cycle hooks in Angular components? Angular Interview asked question.

In An Angular app have lifecycle so its Unit also have. When component load its lifecycle start and lifecycle have hooks. Hooks are functions(events) triggered at various stage of Angular Change Detection.

We can respond to lifecycle hooks ( events) by using interfaces as create, update and destroy.

1. ngOnChanges : — trigger When data bound input property set or reset ( changes) first after create before ngOninit and then after that also. Methods received object contain previous and current value.

ngOnChanges(changes: SimpleChanges) {
 for (const propName in changes) {
  const chng = changes[propName];
  const cur = JSON.stringify(chng.currentValue);
  const prev = JSON.stringify(chng.previousValue);
 }
}

2. ngOnInit : Once after ngOnChanges. Initialize the component fetch data and set properties( default values).

ngOnInit() {
this.getUsers();
this.setData();
}

3. ngDoCheck: called just after ng Oninit first run, then every ngOnChanges. To detect and act upon change angular won’t detect its own. Some properties ngOnChange not able catch.

ngDoCheck() {
// Own Code
}

4. ngAfterContentInit: Trigger after first ngDoCheck once ( After content initialize ). When projection External content into components view. (Content Projection)

<ng-content></ng-content> and html between components tags.
`<after-content>
<app-child></app-child>
</after-content>

5. ngAfterContentChecked: Trigger after first ngAfterContentInit and every ngDoCheck. Respond after Angular check content projection is done and also perform various actions.

It concern ContentChildren, the child components that Angular projected into the component.

export class AfterContentComponent implements AfterContentChecked, AfterContentInit {
@ContentChild(ChildComponent) contentChild: ChildComponent;
ngAfterContentInit() {
// contentChild is set after the content has been initialized
this.doSomething();
}
ngAfterContentChecked() {
// contentChild is updated after the content has been checked
this.doSomething();
}
}

6. ngAfterViewInit: Trigger After a component’s views are initialized once after ngAfterContentChecked.

In Change Detection if there is any change in child angular need to make it should not impact the parent because of unidirectional data flow. It call after child

export class AfterViewComponent implements AfterViewChecked, AfterViewInit {
// Query for a VIEW child of type `ChildViewComponent`
@ViewChild(ChildViewComponent) viewChild: ChildViewComponent;
ngAfterViewInit() {
// viewChild is set after the view has been initialized
this.logIt('AfterViewInit');
this.doSomething();
}
}

7. ngAfterViewChecked: Trigger After every check of a component’s views and child views . After ngAfterViewInit initialized once after every ngAfterContentChecked.

export class AfterViewComponent implements AfterViewChecked, AfterViewInit {
// Query for a VIEW child of type `ChildViewComponent`
    @ViewChild(ChildViewComponent) viewChild: ChildViewComponent;
    ngAfterViewChecked() {
    // viewChild is updated after the view has been checked
        this.doSomething();
    }
}

9. ngOnDestroy: Trigger before Component destroy(instance deleted).

Useful in memory optimization like unsubscribe, clear time interval, timeouts, unregister callback and detach events.