Data Binding in Angular

• Data Binding allows to define communication between a component and DOM
• Data Binding means to bind view with controllers field. That is whenever we display dynamic data on a view from component, data binding is used
• Data Binding basically means interacting with data. So we can say that the interaction between templates and business logic is called data binding.

There are Five forms of data binding

1. Interpolation
2. Property Binding 
3. Attribute Binding 
4. Event Binding 
5. Two Way Binding

Interpolation

• It converts the expression results to strings. It notes using double curly braces.
• It is technique that allows the user to bind a value to a UI element.
• It binds the data one-way. i.e. when value of the field bound using interpolation changes, it is updated in the page as well. It cannot change the value of the fields.

app.component.ts 

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

@Component({

  selector: 'app-root',

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

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

})

export class AppComponent {

  name = 'Welcome in Angular';

}

app.component.html

<h1>{{ name }}</h1>

Output

Welcome in Angular

Property Binding 

• It is used to bind values of component/model properties to the Html element.
• Depending on the values, it will change the existing behavior of the Html element.
• This is also the type of one-way binding.

Syntax

[Property]='expression'

Ex.

app.component.ts 

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

@Component({

  selector: 'app-root',

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

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

})

export class AppComponent {

  name = 'Welcome in Angular';

}

app.component.html

<span [innerHTML]='name'></span>

Output 

Welcome in Angular

Note: Property binding only works with string data values

Attribute Binding 

• We can set the value of an attribute directly with an attribute binding. This means We must use the attribute binding only when there is not element property to bind
• This binding is used to bind the attribute of an element with the field of a component. Ex. Bind to such attributes.Bind [attr.colspan].

Ex.

app.component.ts 

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

@Component({

  selector: 'app-root',

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

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

})

export class AppComponent {

   cols:number =2;

}

app.component.html

<table>

  <tr>

    <td [attr.colspan]="cols"></td>

  </tr>

  </table>

Event Binding 

• When a user interacts with our app, it's sometimes necessary to know when this happens. A click, hover, or a keyboard action are all events that we can use to call component logic within Angular.
• It's one-way data binding, in that, it sends information from the view to the component class.
• This is opposite from property binding where data is sent from the component class to the view.
• Within parentheses on the left of the equal sign, we have the target event and on the right side, we have the template statements such as component properties and methods.
• When the event is raised, the handler executes the template statement. The template statement typically involves a receiver, which performs an action in response to the event, such as storing a value from the HTML control into a model

app.component.ts 

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

@Component({

selector: 'app-root',

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

styleUrls: ['./app.component.css']
})
export class AppComponent {

Msg(name) {

alert("Welcome " + name);
}
}

app.component.html

<div class="form-group">

<label for="usrName">Name:</label>

<input type="text"class="form-control" #name id="usrName">

</div>

<button type="button"  (click)='Msg(name.value)'>Click</button>

Output

Two Way Binding

It mainly used in the input type field or any form element where user type or provide any value or change any control value in the one side, and on the other side, the same automatically updated in to the controller variables and vice versa.

Example

app.module.ts

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

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

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

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

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

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    FormsModule,

    NgbModule.forRoot()

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

app.component.ts

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

@Component({

  selector: 'app-root',

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

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

})

export class AppComponent {

  public name :string='';

}

app.component.html

<div align="center" class="form-group col-md-2">

  <label>Name:</label>

  <input type="text" class="form-control" [(ngModel)]=name>

</div>

<h2>{{name}}</h2>

 Output