Data Binding in Angular

Hello everyone! Today I brought you a tutorial on one of the most important section in Angular framework. This is called Data Binding.. What does this mean? It’s simply the way to build up the connection between the view and the business logic of the application. The abstract process is going like this.

There are several types of Data Binding available in Angular.

1. Interpolation                 Pattern: {{ value }}
2. Property Binding          Pattern: [property] = "value" 
3. Event Binding                 Pattern: (event) = "event handler"
4. 2 way Data Binding       Pattern: [(ngModel)]

To demonstrate these ways I use Bootstrap to style the web pages. If you don’t have the knowledge to install Bootstrap into an Angular project, see this short article.

Link : install bootstrap into angular project

1. Interpolation

Interpolation means the simple way to bind data into a view using a couple of curly brackets. It will take the value corresponding to the variable defined in the TypeScript file and displays in the HTML file.

app.component.ts

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

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

  sentence = 'I Love Angular';
  title = 'app';
}

app.component.html

<p class="text-center">{{ sentence }}</p>
<br>
<p class="text-center">2 + 3 = {{ 2+3 }}</p>

2. Property Binding

This is another way of data binding into a view. Here I declare a variable called imgUrl within the TS file and then bind the value of it with a couple of square brackets. This is called property binding since we are binding a value to a property/attribute of a HTML element.

app.component.ts

export class AppComponent {
  imgUrl = '../../assets/logo.png';
}

app.component.html

<img [src]="imgUrl" style="width: 200px; height: 150px; display: block; margin: auto; ">

3. Event Binding

Events are some dynamic actions that can be performed in our web pages. Those ones can be click events, mouse moving events and any other one. There are many types of events you can find about them on Google easily. Among them I will use a click event for my explanation.

app.component.ts

export class AppComponent {
  lineText = 'I Love Angular';
  changeMe() {
    this.lineText = 'It is an amazing framework';
  }
}

app.component.html

<p class="text-center">{{ lineText }}</p>
<button class="btn btn-primary btn-sm" (click)="changeMe()" style="display: block; margin: auto; ">CLICK ME</button>

When you click on the CLICK ME button, the content included in the lineText variable value will be changed! This is a simple use of the event binding.

4. Two Way Data Binding

This is the most important type of binding that Angular has! This is doing real time binding of data. I have used an input field to type the word phrase I want to render in the browser. Then I bind it to the input field.

Before doing this we want to import Angular Forms and FormsModule In the app.module TS file.

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

imports: [
    BrowserModule,
    FormsModule
],

This is the app.component.html file connected with app.component.ts file.

<div class="container">
  <div class="row">
      <div class="col-lg-3"></div>
      <div class="col-lg-6">
        <input type='text' style="display: block; margin: auto;" class="form-control" [(ngModel)]="username">
        <br>
        <p>{{ username }}</p>
      </div>
      <div class="col-lg-3"></div>
  </div>
</div>

Now type anything in the input field and you can see the real time data binding in the web page. This is the 2 Way Data Binding in Angular framework! 

Now we have come to the end of this article and I think now you have the basic understanding on Data Binding using Angular..

I will come back soon with another concept available in Angular framework..
Good Bye!