Angular Life Cycle - aakash14goplani/FullStack GitHub Wiki

Topics Covered

Life Cycle Hooks

If a new component is created in Angular and of course Angular is responsible for creating these components when it finds one of our selectors for example, it will instantiate a new version of that component and add it into the DOM.

So once a new component is instantiated, Angular goes through a couple of different phases in this creation process and it will actually give us a chance to hook into these phases and execute some code.

We can hook into these phases by implementing some methods Angular will call if they are present.

  1. ngOnChanges -

    • Called after a bound input property changes
    • This may actually be executed multiple times, it's executed right at the start when a new component is created but thereafter, it's also always called whenever one of our bound input properties changes and with that, I mean properties decorated with @Input(), so whenever these properties received new values.

  2. ngOnInit -

    • Called once the component is initialized
    • This does not mean that we can see it, it has not been added to the DOM yet so to say, it has not been displayed yet but Angular finished the basic initialization, our properties can now be accessed and initialized for example.
    • ngOnInit will run after the constructor.

  3. ngDoCheck -

    • Called during every change detection run.
    • It will run multiple times, actually this method will be executed a lot because this will run whenever change detection runs.
    • Change detection simply is the system by which Angular determines whether something changed on the template of a component or inside of a component, so whether it needs to change something in the template. So whether some property value changed from 1 to 2 and Angular needs to re-render that part of the template and ngDoCheck is a hook executed on every check Angular makes.
    • On every check, not just if something changed, a lot of times ngDoCheck will run because you clicked some button which doesn't change anything but still it's an event and on events or triggering events like you clicked somewhere or a timer fired or an observable was resolved and on these occasions, it will check your code and ngDoCheck will be executed.
    • Whilst this might sound very inefficient, Angular does this in a very efficient way, so change detection on Angular works pretty great and doesn't cost a lot of performance.
    • ngDoCheck is a great method to use if you want to do something on every change detection cycle, like maybe manually inform Angular about some change it would not be able to detect otherwise.

  • ngAfterContentInit -

    • Called after content (ng-content) has been projected into view
    • This is called whenever the content which is projected via ng-content has been initialized.
    • So not the view of the component itself but instead you could say the view of the parent component, especially the part which will get added to our component through ng-content.

  • ngAfterContentChecked -

    • Called every time the projected content has been checked

  • ngAfterViewInit -

    • Called after the component's view (and child views) has been initialized

  • ngAfterViewChecked -

    • Called every time the view (and child views) have been checked
    • So once we are sure that either all changes which had to be done were displayed in the view or no changes were detected by Angular.

  • ngOnDestroy -

    • Called once the component is about to be destroyed
    • If you destroy a component, for example if you placed ngIf on it and this gets then set to false and therefore it removes it from the DOM, ngOnDestroy is called and here's a great place to do some clean up work because this is called right before the object itself will be destroyed by Angular.

ContentChild

  • Elements which are used between the opening and closing tags of the host element of a given component are called content children

  • In Angular 8, the @ContentChild('contentParagraph', {static: true})paragraph: ElementRef; syntax requires { static: true} as a second argument, if you use the selected element inside of ngOnInit. If you DON'T use the selected element in ngOnInit, set static: false instead.

  • More details here

Change Detection

  • Angular uses change detection to track changes to the application's data structures so it knows when to update bound elements in the UI with changed data. Change detection ensure our template bindings display the current data from our component.

  • There are two basic change detection strategies.

    • Default uses the default checkAlways strategy. Every component is checked when any change is detected.
    • OnPush improves performance by minimizing change detection cycles. With OnPush, the component is only checked for changes when input properties change, an event emits, or when an observable emits, if that observable is bound in the template using an async pipe.

  • We set the change detection strategy as part of the component decorator.

    @Component({
   ...
   changeDetection: changeDetection.OnPush
})