Bikash Mainali

Angular Component lifecycle

Bikash Mainali's photo
Bikash Mainali
·

3 min read

How to update object in Angular?

obj: {"x" = 1}

  1. By mutation:

    changing value of x using mutation:

    obj.x = 100;

    In this method, a change detection algorithm (diff) need to do a deep scan (check every element in DOM tree)

  2. By new reference:

    changing value of x using new reference:

    obj = {"x" = 100}

    It is more cheaper because change detection algorithm does not need to do deep scan in DOM tree.

Source Code Example

Youtube Video

  1. Mounting (Constructor, ngOnChanges, ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked)

    during initilization

  2. Updating (ngOnChanges, doCheck, contentCheck, viewCheck)

    when updating data

  3. UnMounting (ngOnDestroy)

    when removing all the items from DOM.

  1. constructor:

    This is invoked when angular creates a component or directive by calling new clause.

  2. ngOnChanges:

    This is invoked every time if there is a change on one of the input properties (input with new reference) of the component.

  3. ngOnInit:

    This is invoked when the given component has been initialized. It is called once after the first ngOnChanges.

  4. ngDoCheck:

    This is invoked when the change detector of a given component is invoked. You should not use ngOnChanges and ngDoCheck on the same component.

    Component's Children Hooks invoked after ngDoCheck:

  5. ngAfterContentInit

    This is invoked after angular perform any content projection into the component's view (template). It is invoked only once after first ngDoCheck.

  6. ngAfterContentChecked

    This is invoked each time when the content of a given component has been checked by the change detection mechanism of angular. It is invoked after ngAfterContentInit and after every subsequent ngDoCheck.

  7. ngAfterViewInit:

    This is invoked when the view(template) of a component has been fully initialized. It is invoked only once after first ngAfterContentChecked.

  8. ngAfterViewChecked:

    This is invoked each time when the view of a given component has been checked by the change detection mechanism of angular. So, it means ngAfterViewChecked is invoked after every subsequent ngAfterContentChecked since content exist inside view.

  9. ngDestory:

    This is invoked just before angular destroys component(s). It is used to detach event handlers, clean up memory, unsubscribe observables etc.

Why do we need ngOnInit() when we have constructor() in Angular?

Because all data may not ve available when invoking constructor during the time of component initialization. For example if we use @Input() in child component, new/changed value of a property used under @Input() will not be available within constructor. So, we need ngOnInit() in this case.

ngOnInit(), and other ...Init() get triggered only once when the component mounts.

Change Detection

change detection function is monomorphic. During change detection Angular scans all elements in DOM tree since it does not know whether change is done by mutation or new reference.

But we can make everywhere new reference and optimize the scanning of DOM tree using onPush Strategy

What is zone.js?

  • executes asynchronous code in one virtual context.

  • inform Angular asynchronous action is over and start change detection (monkey patch all asynchronous actions)

  • ngDoCheck triggers

  • we can start/stop change detection also with zone : 'noop' in bootstrap module

Angular