Angular data binding

 In this tutorial, we will discuss about data binding in Angular, and the two types of binding mechanism; and further see in detail how to use these techniques for efficient processing.Data binding is the process of synchronization between model and view components. To understand better – when data in the model changes, it automatically reflects changes in the view; similarly when data in the view changes, it automatically updates them in the model as well.This technique of synchronization between data and view is called Data binding.

Angular interpolation example:

Interpolation uses double braces {{ }} for displaying data in the view. Interpolation behaves like one way data binding in angular.

Databinding.ts	Databinding.html	Result
heading:string ="Welcome to M - Tutorial";	<h1>{{heading}}</h1>	Welcome to M - Tutorial
imgurl:string ="assets/mtutorial.jpg";	<img src="{{imgurl}}">
	<p>sum 10 + 20 ={{10+20}}</p>	sum 10 + 20 =30
	<p>Total 10 + 20 + 5 -6 ={{10+20+5-6}} </p>	Total 10 + 20 + 5 -6 =29
	<p>Average 10+10+10+10+10/5 ={{10*5/5}}</p>	Average 10+10+10+10+10/5 =10
getsum() { let sum=10+10+10+10+10; return sum; }	<p>Total Sum 10+10+10+10+10 ={{getsum()}}</p>	Total Sum 10+10+10+10+10 =50
getsum() { let sum=10+10+10+10+10; return sum; }	<p>Average using function 10+10+10+10+10/5 ={{getsum()/5}}</p>	Average using function 10+10+10+10+10/5 =10

databinding.component.html

<h1>{{heading}}</h1>
<img src="{{imgurl}}">
<p>sum 10 + 20 ={{10+20}}</p>
<p>Total 10 + 20 + 5 -6 ={{10+20+5-6}}</p>
<p>Average 10+10+10+10+10/5 ={{10*5/5}}</p>
<p>Total Sum 10+10+10+10+10 ={{getsum()}}</p>
<p>Average using function 10+10+10+10+10/5 ={{getsum()/5}}</p>

databinding.component.ts

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-databinding',
  templateUrl: './databinding.component.html',
  styleUrls: ['./databinding.component.css']
})
export class DatabindingComponent implements OnInit {
heading:string ="Welcome to M - Tutorial";
imgurl:string ="assets/mtutorial.jpg";
  constructor() { }
 
  ngOnInit() {
  }
  getsum()
  {
    let sum=10+10+10+10+10;
    return sum;
  }
 
}

Angular property binding example:

Angular using brackets [] for property binding, it means setting the property for an element like class, style, src, id, title. This is also a type of one way data binding in angular.

Propertybinding.ts	Propertybinding.html	Result
head:string="head";	<p [ngClass]="head">Welcome to M - Tutorial</p>	Welcome to M - Tutorial
imgurl:string ="assets/mtutorial.jpg";	<img [src]="imgurl">
color="blue";	<p [style.color]="color">Style setting</p>	Style setting
size=2;	<p [style.font-size.em]="size">Style setting</p>	Style setting
buttonid="btnSubmit";	<button [id]="buttonid">Submit</button>	<button _ngcontent-nju-c0="" id="btnSubmit">Submit</button>
notchecked:boolean=false; checked:boolean=true;	<input type="checkbox" name="gender" value="female" [checked]="notchecked" ><span>Female</span> <input type="checkbox" name="gender" value="male" [checked]="true"; ><span>Male</span>	Female Male

Propertybinding.html

<p [ngClass]="head">Welcome to M - Tutorial</p>
<img [src]="imgurl">
<p [style.color]="color">Style setting</p>
<p [style.font-size.em]="size">Style setting</p>
<button [id]="buttonid">Submit</button>
<input type="checkbox" name="gender" value="female"  [checked]="notchecked" ><span>Female</span>
<input type="checkbox" name="gender" value="male" [checked]="checked" ><span>Male</span>

Propertybinding.ts

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-propertybinding',
  templateUrl: './propertybinding.component.html',
  styleUrls: ['./propertybinding.component.css']
})
export class PropertybindingComponent implements OnInit {
head:string="head";
imgurl:string ="assets/mtutorial.jpg";
color="blue";
size=2;
buttonid="btnSubmit";
notchecked:boolean=false;
checked:boolean=true;
 
  constructor() { }
 
  ngOnInit() {
  }
 
}

Propertybinding.css

.head{
    font-size: 24px;
    color:burlywood;
}

Angular event binding example:

Angular using parentheses () for target event which contains the left side. After equal sign referring template syntax of the function name.

<button (click)="getmessage()" </button>

Eventbinding.ts	Eventbinding.html	Result
getmessage() { console.log("Welcome to Mtutorial"); }	<button class="btn btn-primary" (click)="getmessage()">Submit</button>	Welcome to Mtutorial
inputChange(searchValue: string): void { console.log(searchValue); }	<input type="text" (input)="inputChange($event.target.value)" placeholder="Enter any text here" />	h he hel hell hello
inputChange(searchValue: string): void { console.log(searchValue); }	<input type="text" (change)="inputChange($event.target.value)" placeholder="Enter any text here" />	angular tutorial

eventbinding.component.html

<button class="btn btn-primary" (click)="getmessage()">Submit</button>
<input type="text" (input)="inputChange($event.target.value)"  placeholder="Enter any text here" />
<input type="text" (change)="inputChange($event.target.value)"  placeholder="Enter any text here" />

eventbinding.component.ts

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-eventbinding',
  templateUrl: './eventbinding.component.html',
  styleUrls: ['./eventbinding.component.css']
})
export class EventbindingComponent implements OnInit {
 
  constructor() { }
 
  ngOnInit() {
  }
  getmessage()
  {
   console.log("Welcome to Mtutorial");
  }
  inputChange(searchValue: string): void {  
    console.log(searchValue);
  }
 
}

Angular two way data binding example:

Two way data binding is a combination of property binding and event binding. In one way data binding, we can change view or model at the same time.

To fulfill this functionality angular providing two way data binding this can update the model and view at the same time.

When we enter any text in the textbox, ngModel will update the model and the same time will update the view. We have given two examples of angular two way data binding.

To achieve the two way data binding in angular, first import the FormsModule in app.module file

app.module.ts

import {FormsModule} from '@angular/forms'; 
 
 imports: [
    ...
    FormsModule
  ],

twowaydatabinding.component.html

<input class="margintw"  [(ngModel)] ="message"   placeholder="Enter any text here" />
<br>
<p class="margintw">{{message}}</p>
 
<br>
<select class="margintw" [(ngModel)]="selectedColor" > 
    <option [value]="clr" *ngFor="let clr of color">{{clr}}</option>
  </select>
 
  <br>
  <p class="margintw">{{selectedColor}}</p>
  <br>
  <p class="margintw" [style.background-color]="selectedColor">Welcome M - Tutorial</p>

twowaydatabinding.component.ts

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-twowaydatabinding',
  templateUrl: './twowaydatabinding.component.html',
  styleUrls: ['./twowaydatabinding.component.css']
})
export class TwowaydatabindingComponent implements OnInit {
  message="Hello M-tutorial";
  color = ['Red', 'Blue', 'Green','Yellow'];
  selectedColor="orange";
  constructor() { }
 
  ngOnInit() {
  }
 
}