init to destroy Comple life Cycle hook of an Angular Application

Every component in Angular has a lifecycle, and different phases it goes through from the time of creation to the time it’s destroyed. Angular provides hooks to tap into these phases and trigger changes at specific phases in a lifecycle.

ngOnChanges( ) This hook/method is called before ngOnInit and whenever one or more input properties of the component change.
This method/hook receives a SimpleChanges object which contains the previous and current values of the property.

ngOnInit( ) This hook gets called once, after the ngOnChanges hook.
It initializes the component and sets the input properties of the component.

ngDoCheck( ) It gets called after ngOnChanges and ngOnInit and is used to detect and act on changes that cannot be detected by Angular.
We can implement our change detection algorithm in this hook.

ngAfterContentInit( ) It gets called after the first ngDoCheck hook. This hook responds after the content gets projected inside the component.

ngAfterContentChecked( ) It gets called after ngAfterContentInit and every subsequent ngDoCheck. It responds after the projected content is checked.

ngAfterViewInit( ) It responds after a component’s view, or a child component’s view is initialized.

ngAfterViewChecked( ) It gets called after ngAfterViewInit, and it responds after the component’s view, or the child component’s view is checked.

ngOnDestroy( ) It gets called just before Angular destroys the component. This hook can be used to clean up the code and detach event handlers.

Let’s understand how to use ngOnInit hook, since it’s the most often used hook. If one has to process a lot of data during component creation, it’s better to do it inside ngOnInit hook rather than the constructor:

import { Component, OnInit } from ‘@angular/core’;

@Component({

selector: ‘app-test’,

templateUrl: ‘./test.component.html’,

styleUrls: [‘./test.component.css’]

})

export class TestComponent implements OnInit {

constructor() { }

ngOnInit() {

this.processData();

}

processData(){

// Do something..

}

}

As you can see we have imported OnInit but we have used ngOnInit function. This principle should be used with the rest of the hooks as well.

Data sharing between a component class and its template is referred to as two-way data binding. If you alter data in one area, it will immediately reflate at the other end. This happens instantly and automatically, ensuring that the HTML template and TypeScript code are always up to date. Property binding and html5 and css interview questions and answers for experienced event binding are coupled in two-way data binding.

app.component.ts

import { Component } from “@angular/core”;

@Component({
selector: “app”,
templateUrl: “./app.component.html”,
})
export class AppComponent {
data = “This is an example component of two way data binding.”;
}

app.component.html

<input [(ngModel)]=”data” type=”text”>
<br> <br>
<h2> You entered the data: {{data}}</h2>

app.module.ts

import { NgModule } from “@angular/core”;
import { BrowserModule } from “@angular/platform-browser”;
import { FormsModule } from “@angular/forms”;

import { AppComponent } from “./app.component”;

@NgModule({
imports: [BrowserModule, FormsModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}