Kick Start With Angular 8 Data Binding

In the previous article, we discussed the concept of components in Angular 8 and their usage. You can refer to the previous article by using the following link. Now, In this article, we will discuss the concept of Data Binding in Angular 8.

Angular Data Binding

Data binding is one of the important features in the Angular framework. Data binding establishes the connection between the application UI and Business logic. Basically, Data binding in the Angular framework is the concept of communication between view & the model.

The automatic synchronization between the model and the view is known as Data binding. (i.e.), the data passes from view to model and the data is passed from model to view. When the data is changed in the model the view reflects the change, as well as the data in the view, then the model will be updated. This is why this is a major advantage of the Angular framework because by using the data binding concept we can write fewer codes when compared with other frameworks.

Here,

app.component.html -> view.

app.component.ts -> to write logic code.

Data binding is classified into two types. They are,

One-way data binding
Two-way data binding.

One-way Data binding

Ng bind is a directive used for achieving one-way data binding in the Angular framework. One-way binding is unidirectional. While changes are made in typescript code the HTML template is automatically changed. The value of the model is used in the view, and we cannot change the model from the view.

Types of one-way binding are,

String interpolation binding
Property binding
Event binding.

String interpolation binding {{}}

String Interpolation is a one-way data-binding technique. The interpolation is being expressed in double curly braces {{}} this interpolation binding technique is used to bind a property to DOM (Document Object Model). The string interpolation is mainly used to add the value of a property from the model.

Syntax: {{databinding}}

Property binding []

Property binding is the one-way data binding technique that we can say is the interpolation technique. The property binding is expressed in a pair of square brackets []. As I said it is the same as string interpolation binding. Property binding is commonly used to send the data from the model to view. It is used to bind values to the properties of HTML elements. In the case of binding an element property to a non-string data value for such a case, we use property binding.

Syntax: property[vale]

Event binding

To make changes from view to the model we use Event binding. Every user expects a UI to respond to their actions on-page. Such actions will trigger an event on the page and have to respond by listening to events like button clicks, mouse moves, key up, change events, etc., Using this Event binding technique we can call a function without writing a piece of new code.

Syntax: (Eventname)

Two-way data binding

The combination of the property binding and the event binding is known as Two-way data binding. The automatic synchronization of data between the model and the view is called two-way binding. Whenever we make changes in the model it will automatically reflect the changes immediately in view.

ngModel is a directive used to achieve two-way binding. I hope Maybe Everyone or few members will be familiar with the world-famous “banana in the box”.

ngmodel is not a part of Angular’s code library, it is defined in the forms module library we need to import FormsModule library in our app.module.ts file.

Syntax: [(ngModel)]=”[Property of your component]”

Here comes the main picture we have been waiting for. Up to now, we have gone through about Data binding, now we will see in hands-on with data-binding.

First let’s start with string interpolation, open app.component.html and replace the following code as mentioned below.

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

Then open app.component.ts file and replace the following code as mentioned.

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'bindings';
name = 'c# corner';
topic= 'databinding';
}

The further step is now we can see about data-binding with property binding, for that open app.component.html and again replace the following code as mentioned below.

<div class="container">
<h3><a [href]='name'>
name</a></h3>
</div>

Open app.component.ts and replace the following code as mentioned below.

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'bindings';
name ='https://www.c-sharpcorner.com/';
}

You may wonder why am I replacing the code again and again in the same app.component.html and as well as in app.component.ts You can either create a new component for each binding and see the output or you can stick with the above technique.

For Event binding open app.component.html and replace the following code as below

<button (click)="onSave()">save</button>

then open app.component.ts file and replace the following code below

onSave(){
console.log("Button is clicked ");
}

Up to now we have seen about one-way data binding. Now let’s start with two-way data binding. Type the following code in html file and type the following code in ts file and don’t forget to import the property in app.module.ts. Now we can see the output in the browser.

<h2>Two-way Binding Demo</h2>
<input [(ngModel)]="Name" />
<p> {{Name}} </p>
and open app.component.ts file and replace the following code as mentioned below.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'bindings';
Name ='shobana';
}

Summary

In this article, we have seen about the basics of data binding and gotten hands-on with it. I hope this article will be useful for you and in my next article we will learn about how to use of Angular material with the existing project.