Sharing Top Content from the Angular-sphere.

Angular2 Lifecycle Hooks

  • >app.ts file:

    class MyComponent {

    constructor( ) {

    /*all other modules injection and dependency injection and initialization will go here*/

    console.log(“This is Constructor”); // printed first in console

    }

    }

    ngOnChanges:

    This hook will be run when our component is setting or resetting the values for input properties.This will be called before ngOnInit hook whenever the changes in the input property made in a component.

  • This may run multiple times in the lifetime of the each component

    >app.ts file:

    class MyComponent {

    ngOnChanges( ) {

    /*Called when the changes made in the input properties of the component before it binds to view*/

    console.log(“This is ngOnChange”); // printed second in console

    }

    }

    ngOnInit:

    The Initialization of the component or directive of our app will be made in this hook after the angular displays the initial value of input properties.

  • This hook will run only one time after initializing all the properties of the component

    >app.ts file:

    class MyComponent {

    ngOnInit( ) {

    /*the Initialization of every input properties and functionalities will go here*/

    console.log(“This is ngOnInit”); // printed third in console

    }

    }

    ngDoCheck:

    This will be called immediately after ngOnInit, And called on every change made in component properties, So the operations that have to be done on the change of any input properties can be written in this hook.

  • This will be executed for every change detection in cycles even there is no properties changed

    >app.ts file:

    class MyComponent {

    ngDoCheck( ) {

    /*The functionalities to be done for every change made in input properties will go here*/

    console.log(“This is ngDoCheck”); //printed whenever the changes made

    }

    }

    ngAfterContentInit:

    This will be called after the angular updates the component’s view values this will be called after ngDoCheck hook.

  • This will be called after ngAfterContentInit and every call of ngDoCheck hook of the component

    This hook also can be written only for component of angular application

    The component this will be called when the content which is inserted has been changed

    >app.ts file:

    class MyComponent {

    ngAfterContentChecked( ) {

    /*The functionalities to be done when changes present in the component will go here*/

    console.log(“This is ngAfterContentChecked”); /*printed when the content is checked and changes present*/

    }

    }

    ngAfterViewInit:

    Called when the angular checks the view of the component and child views of the components.

Angular is a javascript development platform for creating desktop and mobile web applications, Angular 2 will help us to create that application on

@techjini: What are the #Angular2 Life Hooks

#AngularJs #Nodejs #Developers #appdev #webdev #Angular #Vuejs #javascript

Angular is a javascript development platform for creating desktop and mobile web applications, Angular 2 will help us to create that application on a basis of components. To know about basics of component refer this blog.

Let’s see about lifecycle hooks in Angular2.

There are eight main hooks for every component to have robustness in our built applications.

Constructor:

This won’t be taken as lifecycle hooks but this will instantiate all component hooks and it is run first when the component is activated.

>app.ts file:

class MyComponent {

constructor( ) {

/*all other modules injection and dependency injection and initialization will go here*/

console.log(“This is Constructor”); // printed first in console

ngOnChanges:

This hook will be run when our component is setting or resetting the values for input properties.This will be called before ngOnInit hook whenever the changes in the input property made in a component.

This will be used to render the DOM and updating the DOM for each and every changes made in the component attributes.

This may run multiple times in the lifetime of the each component

>app.ts file:

class MyComponent {

ngOnChanges( ) {

/*Called when the changes made in the input properties of the component before it binds to view*/

console.log(“This is ngOnChange”); // printed second in console

ngOnInit:

The Initialization of the component or directive of our app will be made in this hook after the angular displays the initial value of input properties.

When changes made in input properties of the component this hook will be called after the ngOnChanges.

This hook will run only one time after initializing all the properties of the component

>app.ts file:

class MyComponent {

ngOnInit( ) {

/*the Initialization of every input properties and functionalities will go here*/

console.log(“This is ngOnInit”); // printed third in console

ngDoCheck:

This will be called immediately after ngOnInit, And called on every change made in component properties, So the operations that have to be done on the change of any input properties can be written in this hook.

This will be executed for every change detection in cycles even there is no properties changed

>app.ts file:

class MyComponent {

ngDoCheck( ) {

/*The functionalities to be done for every change made in input properties will go here*/

console.log(“This is ngDoCheck”); //printed whenever the changes made

ngAfterContentInit:

This will be called after the angular updates the component’s view values this will be called after ngDoCheck hook.

This hook can be written only for component of angular application

If the content is inserted in the component this will be called

>app.ts file:

class MyComponent {

ngAfterContentInit( ) {

/*The functionalities to be done when initialization of the whole content in the component will go here*/

console.log(“This is ngAfterContentInit”); /*printed when the whole content is initialized*/

ngAfterContentChecked:

This hook will be called after the angular checked the content has been projected into the component. This will be called after ngAfterContentInit and every call of ngDoCheck hook of the component

This hook also can be written only for component of angular application

The component this will be called when the content which is inserted has been changed

>app.ts file:

class MyComponent {

ngAfterContentChecked( ) {

/*The functionalities to be done when changes present in the component will go here*/

console.log(“This is ngAfterContentChecked”); /*printed when the content is checked and changes present*/

ngAfterViewInit:

Called when the angular checks the view of the component and child views of the components.

It will check all the HTML view has been initialized

>app.ts file:

class MyComponent {

ngAfterViewInit( ) {

/*The functionalities to be done when initialization of the whole content has been projected into view will go here*/

console.log(“This is ngAfterViewInit”); /*printed when the whole content is projected in view and runs only once*/

ngAfterViewChecked:

Initially this hook will be called after the ngAfterContentChecked hook and after every call of ngAfterViewInit and subsequent of ngAfterContentChecked.

It will check all initialized view or child view had any changes

>app.ts file:

class MyComponent {

ngAfterViewChecked( ) {

/*The functionalities to be done when changes present in the component and they are projected in view will go here*/

console.log(“This is ngAfterViewChecked”); /*printed when the content is checked and changes present are projected in view*/

ngDestroy:

This hook will be called only when the component is removed from the view of the angular component, So the deallocation of memory and removing the intervals, timeout variables will be done in this hook.

>app.ts file:

class MyComponent {

ngDestory ( ) {

/*The functionalities to be done when the component is unmounted from the app will go here*/

console.log(“This is ngDestory”); /*printed in after the component is unmounted*/

You can check the example here open your console and workout with the hooks. For more information refer angular documentation.

Angular2 Lifecycle Hooks

Comments are closed, but trackbacks and pingbacks are open.