Data Binding In Angular

The Code Points May 24, 2022 0

In this article, We will learn how data binding works in Angular with examples. If no dynamic data is displayed, Angular Components are worthless. They must also react to events and respond to user interactions. The data binding keeps both the component and the view in sync. To bind data, we employ techniques like interpolation, property binding, event binding, and two-way binding. We also learn how to use the ngModel directive in Angular Forms to achieve two-way binding.

What is Angular Data Binding

Data binding is a method of synchronizing data between the component and the display. Angular refreshes the component whenever the user updates the data in the view. Angular refreshes the view when the component receives new data.

Data binding has numerous applications. You can dynamically present models to the user. Change the style of elements, respond to user interactions, and so on.

Data Binding in Angular

In Angular, data binding may be divided into two categories. Binding in one direction or two directions

One way binding

Data flows from one direction in one-way binding. Either from component to view or from view to component.

Interpolation:

We can use interpolation to incorporate expressions as part of any string literal in our HTML. The expressions are evaluated into a string, which is then replaced in the original string and the view is updated. Interpolation is available anywhere a string literal is used in the view.

The interpolation is indicated by the {{}} (double curly brackets) in the Angular template. The syntax is as follows:

{{ templateExpression }}

Template Expression is the content inside the double brackets.

The Template Expression is first evaluated and converted into a string by Angular. The result is then substituted for Template expression in the original HTML string. Angular updates the original string whenever the template expression changes.

Example:

Update your app.component.html looks like below:

<span>Welcome,  {{firstName}} {{lastName}}</span>

Update your app.component.ts looks like below:

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  firstName= "Jignesh";
  lastName= "Patel"
}

Now, run the application, and the result will say "Welcome, Jignesh Patel." Both firstName and lastName are replaced with the values of the component's firstName and lastName variables.

Angular also changes the view if the firstName and lastName values change. But not in the other direction.

Property binding

Property binding allows us to attach HTML element properties to component properties. Angular updates the element property in the View whenever the component value changes. Property binding can be used to set properties such as class, href, src, textContent, and so on. It can also be used to set the properties of custom components or directives (properties with the @Input prefix).

The following syntax is used in the Property Binding.

[binding-target]=”binding-source”

A square bracket [] surrounds the binding-target (or target property). It should be the same as the name of the surrounding element's attribute.

We encapsulate binding-source in quotations and assign it to binding-target. A template expression must be used as the binding source. It can be a component property, a component method, a template reference variable, or an expression that contains all of them.

Angular updates the view whenever the value of Binding-source changes.

Example:

Update your app.component.html looks like below:

<h1 [innerText]="title"></h1>
<h2>Example 1</h2>
<button [disabled]="isDisabled">I am disabled</button>

Update your app.component.ts looks like below:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title="Angular Property Binding Example"
  
  //Example 1
  isDisabled= true;
 
}

The h1 tag's innerText property is connected to the component class's title property. Disabled The is connected to the button's property. Disabled The component's property

Angular automatically refreshes the view if the title or isDisabled in the component is changed.

For establishing the class and styles, the property binding has its own syntax. Furthermore, neither interpolation nor property binding affects the attributes of HTML elements. As a result, such scenarios have an attribute binding.

Two Way binding

Changes to our component's model are propagated to the view, and any changes to the view are promptly updated in the underlying component.

In data entry forms, two-way binding is useful. We'd like to update our model whenever a user makes changes to a form field. Similarly, we'd like to refresh the view when we update the model with new data.

The banana in a box [()] syntax is used for the two-way binding.

<Element [(someProperty)]="value"></Element>

Both property binding and event binding are set up with the above syntax. However, in order to use it, the property must have the change event named <propertyName> Change

Angular, on the other hand, has an unique directive called ngModel that sets up the two-way binding.

ngModel

The ngModel directive is used by Angular to achieve two-way binding on HTML Form components. It is bound to a form element such as input, select, selectarea, and so on.

The ngModel directive isn't included in the Angular Core package. It's included in the @angular/forms package. The FormsModule package must be imported into your Angular module.

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

Then, as seen below, you can use it with the two-way binding syntax.

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

When you bind to a ngModel directive, it sets up property binding and event binding behind the scenes. It uses property binding to connect to the element's value property. It then sets up the event binding to listen for changes to the value using the ngModelChange event.

Conclusion

In Angular, data binding comprises of interpolation and property binding, which is a one-way communication from component to view. We can use interpolation to embed an expression in a string literal. We may set element property to the component class using Property binding. To establish a two-way data binding, we mix property binding with event binding. The two-way data binding on form elements is built up using the ngModel directive from the Angular FormsModule.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in comment section.