Overview Of Data Binding In Angular

Introduction

Data binding is the most important feature of Angular. It allows for defining communication between a component and the DOM. In Angular, there are two types of Data Binding.

1. One-Way Data Binding 
2. Two-Way Data Binding 

Prerequisites 

Basic knowledge of Angular

One-Way Data Binding

One-way data binding is unidirectional. You can only bind the data from component to the DOM or from DOM to the component.

From Component -----> DOM

Interpolation:{{ value}} 

Allows users to bind a value to an HTML element. 

Let's consider an example using interpolation technique.

app.component.ts file

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   companyName:string='Just Compile';
}

In the above shared snapshot, I have one property, ‘CompanyName’, of type string which will bind to the View, enclosed in double curly braces: {{property Name}}.

app.component.html file

<div class="container" style="margin-top: 180px;text-align: center">
   <h2>Company Name
      <span style="color:#ff4081;">
         {{ companyName }}
      </span>
   </h2>
</div>

In app.component.html file, we use ‘companyName’ to display its value. Here, Binding data is done from component to the view. If value changes in the component it will be reflected in the view.

Let’s run the application.

 

 

 

Property Binding [property]=’value’

Property binding is used to bind values to the DOM properties of the HTML elements.

Let’s consider an example for Property Binding which will create a property named as ‘companyWebsite’ of type string and assign value to that string.

app.component.ts file

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   companyWebsite:string='https://justcompile.com/';
}

app.component.html file

<div class="container" style="margin-top: 180px;text-align: center">
   <h2><a [href]='companyWebsite'style="color:#ff4081;" target="_blank">
   Just Compile</a></h2>
</div>

 

 

 

In the above example, we bind the value of ‘companyWebsite’ to the href property of the anchor tag.

 

From DOM-----> Component

Event Binding :(event)=”fun()”

With the help of Event Binding, we can bind data from DOM to Component.

Let’s consider an example.

app.component.ts file

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   companyWebsite:string='https://justcompile.com/';
   companyBlogs:string;
   isShow:boolean;
constructor(){
   this.isShow=false;
}
show(){
   this.companyBlogs='http://blogs.justcompile.com/';
   this.isShow=true;
   }
}

app.component.html file

<div class="container" style="margin-top: 180px;text-align: center">
    <div class="row">
        <h2>
            <a [href]='companyWebsite'style="color:#ff4081;" target="_blank">Just Compile</a>
        </h2>
    </div>
    <div class="row">
        <button (click)='show()'class="btn btn-defualt">Show Blogs</button>
    </div>
    <div class="row">
        <h2>
            <a *ngIf='isShow'[href]='companyBlogs'style="color:#ff4081;" target="_blank">{{companyBlogs}}</a>
        </h2>
    </div>
</div>

Let’s explore the above code line by line.

1. In the TypeScript file, I have two properties - ‘companyBlogs’ of type string and ‘isShow’ of type boolean.
2. After that, in the HTML file, I have one click event, i.e., show().
3. We need to handle the show() event into TS file.
4. When the button is clicked, I am displaying the ‘companyBlogs’ value.

 

 

 

 

Two-Way Data Binding 

Two-Way Data Binding helps us to exchange data from both sides, i.e., from component to view and from view to the component.

Have you ever heard the word ngModel and its famous ‘Banana In The Box’ syntax? The syntax helps us quickly recognize how to properly write two-way data binding.

Let’s consider the below figure, which describes Banana In The Box syntax.

 

 

Let’s try to understand the above syntax by doing some code.

 app.component.ts file

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   email:string='';
   constructor(){
   }
}

app.component.html file

<div class="container" style="margin-top: 180px;text-align: center">
    <div class="form-group row col-md-12">
        <label for="Email" class="col-md-4">Email</label>
        <div class="col-md-8">
            <input type="text" class="form-control" [(ngModel)]='email' placeholder="Enter Your Email.">
            </div>
            <br/>
            <br/>
            <span>
                <h4 >Your Email is :
                    <span style="color:#ff4081;"> {{email}}</span>
                </h4>
            </span>
        </div>
    </div>

That’s it. Now run the application.

Ohhhh😶!This is not what we want.

Why the above error?

“Template Parse Error”

Read the below line carefully:

Can't bind to 'ngModel' since it isn't a known property of 'input'.

In order to use two-way data binding for form inputs you need to import the FormsModule package in your Angular module. FormsModule provides additional directives on form's elements, including input, select, etc. That's why it's required and this is what the above line wants to say.

So, let’s import FormsModule into our app.module.ts file,

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

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

Now run the application.

 

Conclusion

In this article, we learned how to bind data using different techniques.

I hope this article was helpful to you. If it was, please leave a comment.

Thank You!