Component Lifecycle Hooks

What is a lifecycle hook?

The number of methods called in a sequence to execute a component at specific moments is known as lifecycle hook.

constructor

ngOnChanges( ) 

ngOnInit( ) 

ngDoCheck( )

ngAfterContentInit( ) 

ngAfterContentChecked( ) 

ngAfterViewInit( ) 

ngAfterViewChecked( ) 

ngOnDestroy( ) 

Lifecycle of a component includes :

• Creating a component
• Rendering a component
• Creating and rendering its child components
• Checking data-bound properties
• Destroying and removing it from DOM

Change Detection

in Angular

What is change detection?

Change detection is the mechanism designed to track changes in an application state and render the updated state on the screen. It ensures that the user interface always stays in sync with the internal state of the program.

As our state changes, we need to detect that and reflect the change.

Two-way data-binding

Unidirectional data flow

VS

Angular separates updating the application model and reflecting the state of the model in the view into two distinct phases. The developer is responsible for updating the application model. Angular, by means of change detection, is responsible for reflecting the state of the model in the view.

View as a core concept

under the hood angular uses a low-level abstraction called view.

View state

• FirstCheck
• ChecksEnabled
• Errored
• Destroyed

export class AppComponent {
    constructor(cd: ChangeDetectorRef) { ... }

export declare abstract class ChangeDetectorRef {
    abstract checkNoChanges(): void;
    abstract detach(): void;
    abstract detectChanges(): void;
    abstract markForCheck(): void;
    abstract reattach(): void;
}

export abstract class ViewRef extends ChangeDetectorRef {
   ...
}

So in short :

• Use detectChanges() when you've updated the model after angular has run it's change detection, or if the update hasn't been in angular world at all.

• Use markForCheck() if you're using OnPush and you're bypassing the ChangeDetectionStrategy by mutating some data or you've updated the model inside a setTimeout;

Angular Change Detection Strategies

ChangeDetectionStrategy.Default - will checks every time something may have changed, this is called dirty checking.

ChangeDetectionStrategy.onPush - will only depend on the component’s inputs, events, markForCheck method, or the use of the async pipe in the template, to perform a change detection mechanism and update the view.

Immutability

• immutable.js
• redux
• NgRx
• ...

Solutions

ExpressionChangedAfterItHasBeenCheckedError

But where does the error come from?

Fixing the error

NgZone.runOutsideAngular

Title Text

@Component({
    selector: 'r-comp',
    template: `{{addRender()}}`
})
export class RComponent {
   ngDoCheck() {
// holds all calls in order and is logged to console
   
   calls.ngDoCheck.push('R');
}

@Component({
    selector: 'r-comp',
    template: `{{addRender()}}`
})
export class RComponent {
    addRender() {
        calls.render.push('R');
    }
}

Change detection operations

When Angular checks the current component it calls lifecycle hooks on child components, but renders DOM for the current component.

Change detection mechanism is implemented as depth-first internally,

but involves calling ngDoCheck lifecycle hooks on sibling components first.