Angular Data Binding என்றால் என்ன?

data binding என்பது dom-க்கும் component-க்கும் இடையிலான communication-யை குறிப்பது ஆகும்.
இது 4 வகை உள்ளது.
1.String Interpolation
2.Property Binding
3.Event Binding
4.Two-way Binding

String Interpolation

String Interpolation என்பது angular-ல் ஒரு data-வை display செய்ய உதவுகிறது. Interpolation பயன்படுத்தி component-ல் இருக்கும் மதிப்பை html-ல் காண்பிக்க பயன்படுகிறது.
{{}}->இந்த double curly braces பயன்படுத்தி component-ல் இருக்கும் மதிப்பை html காண்ப்பிக்க உதவுகிறது.

app.component.ts


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


@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'myApp';



  Heading:string="I Love India";

}

Heading என்பது ஒரு string data type ஆகும்.இதுனுள் i love india என்று கொடுக்கப்பட்டுள்ளது.

app.component.html



<h2>{{Heading}}</h2>



<router-outlet></router-outlet>

{{Heading}} என்று கொடுக்கும்போது இந்த Heading-இல் சேமிக்கப்பட்டிருக்கும் i love india என்ற மதிப்பானது html-ல் display செய்யப்படும்.

Property Binding

இதனை நீங்கள் square bracket உள்ளே கொடுக்க வேண்டும்.

app.component.ts


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



@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'myApp';



  MyName:string="Kumar";

}

MyName என்பது ஒரு string data type ஆகும்.இதுனுள் Kumar என்று கொடுக்கப்பட்டுள்ளது.

app.component.html



<h2>Property Binding</h2>


<input type="text" [value]="MyName">

[value] இங்கு value என்ற property-யை square bracket உள்ளே கொடுக்க வேண்டும்.
MyName-ல் இருக்கும் kumar என்ற மதிப்பானது [value] என்ற property-இல் assign செய்யப்படுகிறது.
Event Binding

Event Binding என்பது Dom-இல் நடைபெறும் button click ஆகும்.Dom-ல் ஒரு evnet நடைபெறும்போது,அது component-ல் இருக்கும் ஒரு குறிப்பிட்ட method-யை call பண்ணும்.

app.component.html


Event Binding


<button (click)="display()">Click</button>

(click) என்பது event ஆகும்.
display() என்பது method ஆகும்.

app.component.ts


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



@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {



  display():void{

    alert("I Love JavaScript");

  }



}

dom-ல் button-யை click செய்யும்போது,typescript-இல் இருக்கும் display() என்ற method-யை call பண்ணும். அப்பொழுது display() என்ற method-இல் இருக்கும் alert message execute ஆகும்.

Two-way Binding

property binding மற்றும் event binding இந்த இரண்டும் ஒன்றாக சேர்ந்தது தான் Two-Way Binding ஆகும்.
Html-ல் value மாற்றினால் typescript-ல் value மாற்றம் செய்யப்படும்.typescript-ல் value மாற்றினால் html-ல் value மாற்றம் செய்யப்படும்.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';

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

import {FormsModule} from '@angular/forms'; 

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';




@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    FormsModule 

  ],



  providers: [],

  

  bootstrap: [AppComponent]



})

export class AppModule { }

Two way binding பயன்படுத்த வேண்டுமென்றால் முதலில் FormModule-யை imports செய்ய வேண்டும்.

app.component.ts



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



@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'myApp';





  name:string;



}

name என்பது ஒரு string data type ஆகும்.இதுனுள் value கொடுக்கவில்லை.

app.component.html



Name:<input [(ngModel)]="name">

<p>{{name}}</p>

இப்படித்தான் ngModel-யை declare செய்ய வேண்டும்.
[()] இதனை Banana In The Box என்று அழைப்பார்கள்.
name என்பதை expression-ல் கொடுத்துள்ளேன்.
நான் input box-இல் type செய்யும்போதெல்லாம் name என்ற expression-ல் display செய்யப்படும்.

Output: