What is data binding?

 

Data binding is a technique used in software engineering that connects data sources to user interfaces in order to keep them synchronized. It allows data to flow between different parts of an application, such as between a user interface and a database or between two components of an application.

In data binding, changes made to one part of the application are automatically propagated to other parts of the application that depend on that data. For example, if a user updates a value in a form, the corresponding database record is automatically updated without the need for additional code to update the database.

Data binding can be implemented in different ways, such as one-way binding, where changes in the data source update the user interface, or two-way binding, where changes in the user interface also update the data source. Data binding can also be implemented using different technologies, such as frameworks like Angular or React, or using native platform features in mobile or desktop applications.

                                 Types of Data Binding

There are two types of data binding:-

• One way data binding

• Two way data binding

One way data binding:

Component  to view

1. Interpolation

2. Property binding

3. Style binding

4. Attribute binding

View to component

1. Event binding

Interpolation

Interpolation is a technique to bind the data from the component to the view. It comes under one way data binding. It can be used for String, Integers, array,Objects and many more.

The syntax for the Interpolation is double curly braces - {{variable_name}}.

We have created a variable in component.ts and took the value in ‘String’,’Name’ and ‘Array’.

export class AppComponent {

  title = 'databinding';

  name = 'Anand'

  age = 25

  address ={

    city : 'Noida',

    state: 'Uttar Pradesh'

  }

}

And in the html file place the variable_name inside {{}} to use the variable.

<h3>My name is {{name}}</h3>

<h3>My age is {{age}}</h3>

<h3>I live in {{address.city}}</h3>

<h3>Noida is situated in {{address.state}}</h3>

Property Binding

Property Binding is a technique to bind properties of elements from component to view. It can be used for all types of properties such as title, placeholder and many more.

The syntax for defining property binding is [property] = “expression”

We have created the variable in ts file.

name = 'Anand'

And bind the value in the html file.

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

Property binding works the same as interpolation but there is some difference between them.

Interpolation does not work for bool.

Style Binding

It is the technique to apply the style from component to view.

Write the following code in ts file.

export class AppComponent {

  title = 'databinding';

  color = "Blue"

}

And the following code in html file.

<h1 [style.color]="color">This is style binding</h1>

The output will be:

Attribute Binding

It is a technique to bind the attribute of element from component to view. In attribute binding, data flows from component to view. It is one way data binding. The syntax for defining attribute data binding is [attr.attribute_name] = “expression”.

We can only use property binding and interpolation for binding the properties, not attribute. We need separate attribute binding to create and bind the attribute.

Event Binding

Event binding is used to handle the events raised by the user actions like button click, mouse movement, keystrokes, etc.

Syntax for the event binding:-

< element (event) = function() >

Write the code in ts file:

export class AppComponent {

  title = 'databinding';

  getData(data:string)

  {

    console.warn(data);

  }

}

And the following code in html.

<button (click)="getData('This is event binding')">submit</button>

The output will be:

Two way data binding:

• Data flows from view to component and back from component to view.

Two way binding: In two way data binding, property binding and event binding is combined together.

[(ngModel)] = "[property of your component]" 

First, we have to import FormsModule in app.module.ts file

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

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

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

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

import{FormsModule} from '@angular/forms'

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    FormsModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

Write the code in html

<input type="text" [(ngModel)]="name">

<h3>{{name}}</h3>

And write the following code ts file

export class AppComponent {

  title = 'databinding';

  name : any;

}

The output will be: