angular life cycle hooks

Lifecycle hooks are the way Angular allows you to add code that works before or after each step of the routing life cycle or components or we can say that desired code may be injected into components and code will execute during component’s life cycle events. Each component life cycle event occurred in a specific order. Following is List of Angular Hooks offers are:

• OnInit
• OnDestroy
• DoCheck
• OnChanges
• AfterContentInit
• AfterContentChecked
• AfterViewInit
• AfterViewChecked

1. declare that your directive or component class implements the interface and then
2. . declare that your directive or component class implements the interface and then

Constructor

A constructor is the first event of an angular component which called at the time instantiation of the component class using the new keyword or we can say that at the time of component’s object creation. A constructor is usually used to inject dependencies in components. Constructor overloading is not possible in angular. All angular life cycle events are executed after constructor code execution.

Order of life cycle hooks events

OnInit and OnDestroy

The OnInit hook is called when your directive properties have been initialized, and before any of the child, directive properties are initialized. Similarly, the OnDestroy hook is called when the directive instance is destroyed. This is typically used if we need to do some cleanup every time our directive is destroyed. In order to illustrate let’s write a component that implements both OnInit and OnDestroy: code/advanced-components/src/app/lifecycle/on-init/on-init.component.ts

The ngOnInit method of a component is called directly after the constructor and after the ngOnChange is triggered for the first time. It is the perfect place for initialisation work.

Step1: Create new component: app-angularlifecyclehooks1

Step2: Code for app-angularlifecyclehooks1

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-angularlifecyclehooks1',
  templateUrl: './angularlifecyclehooks1.component.html',
  styleUrls: ['./angularlifecyclehooks1.component.css']
})
export class Angularlifecyclehooks1Component implements OnInit , OnDestroy {

  constructor() { }

  ngOnInit() {
    console.log('Oninit is callled');
  }
  ngOnDestroy()
  {
    console.log('OnDestroy is callled');
  }

}

HTML

<p>
  angularlifecyclehooks1 works!
</p>

Step 3: Add reference of newly created component into app.component and write following code.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  display: boolean;
constructor()
{
this.display = true;
}
myfun()
{
  this.display = !this.display;
}

}

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
 
</div>
<div>

</div>
<div>
  <input type="button" (click)="myfun()" value="click here" />
<app-angularlifecyclehooks1 *ngIf="display"></app-angularlifecyclehooks1>
</div>

ngOnChanges:

The ngOnChanges will be called first when the value of a bound property changes. It executes, every time the value of an input property changes. It will receive a changes map, containing the current and previous values of the binding, wrapped in a SimpleChange.

{“brand”:{“previousValue“:””,”currentValue“:”BMW”}}

In the case above, one change to the input property brand is reported. The value of this property has been changed from an empty string to the string “BMW”.

ngOnChanges

The ngOnChanges hook, with it’s SimpleChanges object, is a little different. Here’s how you would implement it. Let’s say we have a component used like this:

Example

App.component.html

<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
 
</div>
<div>
<input type="text" (blur)="changenameproperty(txt1.value)" #txt1/>
</div>
<div>
<app-ngonchangeex [name]="name" [content]="content"></app-ngonchangeex>
</div>

App.Component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
 
  name: string;
constructor()
{

this.name="yogesh";
}

changenameproperty(val)
{
  this.name = val;
}
}

Ngonchange.component.ts

import { Component, OnInit, Input , OnChanges, SimpleChanges} from '@angular/core';

@Component({
  selector: 'app-ngonchangeex',
  templateUrl: './ngonchangeex.component.html',
  styleUrls: ['./ngonchangeex.component.css']
})
export class NgonchangeexComponent implements OnInit , OnChanges {
@Input() name: string;
@Input() content: string;
  constructor() { }

  ngOnInit() {
  }
  ngOnChanges(changes: SimpleChanges)
  {
for(let prop in changes)
{
  if(prop ==="name"){
    console.log('previous value '+ changes[prop].previousValue);
    console.log('current value '+ changes[prop].currentValue);
    
  }
}
  }
  

}