Angular Data Binding

               In a model view controller method of programming data binding is the  synchronization between model and view. It means the same in Angular.js also and in Angular it is the most powerful feature which has been implemented with so much care and intelligence. Angular’s data binding includes mechanisms like Template Expression, Property Binding in which there is different types of targets such as Element binding and Component Binding, Event binding, Banana-in-the box concept. Property binding, Template expression are one-way bindings whereas banana-in-the-box concept is a two way binding. In angular data binding is done using angular’s template syntax. A common way of showing bound values is to display them as children of another DOM element. To do this in angular we use two braces i.e. our variable from the template using its name will be marked using braces on each side. This is an example of one way binding.

import { Component } from '@angular/core'

 

@Component({

  selector: 'my-app',

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

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

})

export class AppComponent {

  name = 'Angular'

}

 

In two way binding we use ng-model directive to bind data from model to view on HTML controls. Angular will keep track of the change that are made by users and updates the variables accordingly.

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 {}

<input [(ngModel)]="name"/>

Two way binding is used as shown in the above example