Basics Of Data Binding In Angular

This article explains about the basic concepts of Data Binding in Angular

Data Binding in Angular is the communication between the Typescript code of a component that contains the business logic and the View or Template which contains HTML markup. In other words, it is moving data from component class properties to HTML element properties.

 

Types of Data Binding - String Interpolation & Property Binding

 

String Interpolation

 

Any expression that can be resolved into a string is called string interpolation. It has to resolve to a string at the end. String Interpolation flows data in one direction. Angular converts interpolation to property binding.

Syntax: {{data}}
Example: <img src='{{imgPath}}' />

 

Property Binding

 

Property Binding can be One Way and Two Way Binding.

Syntax: [property]="data"

Example: <img [src]='imgPath' /> 

 

When to use Interpolation and Property Binding 

 

To concatenate strings we must use interpolation instead of property binding.

 

To set a property to a non string data value, property binding must be used.

 

Two-way data binding uses both property and event binding. It is a simple way of reacting to events in both directions. The data is synchronized continuously from the component to the view and from the view to the component.

Syntax: [()]

Example: [(ngmodel)]="userName"

Here ngmodel is a directive and username is the property.

 

Follow the below example to understand two way data binding.

 

Create an input field which updates the property ('username') via two way binding.Output the username via string interpolation (in a paragraph below the input). A reset button gets enabled only when the username is empty and on clicking the username field is reset.

 

Pre-requisites

 

Development Environment Setup- Visual Studio Code editor, Angular CLI, Node js.

 

Forms module is required for two way data binding- Import forms module from @angular/forms in the app.module.ts file. Adding FormsModule to the imports[] in the AppModule.

Step 1

Create a new Angular app by running the following command from the terminal - ng new DataBindingExample

 

Step 2

 

Go to the AppModule.ts file and import Forms module from '@angular/forms' and add FormsModule in imports[].

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { UsernameComponent } from './username/username.component';

@NgModule({
  declarations: [
    AppComponent,
    UsernameComponent
  ],
  imports: [BrowserModule, FormsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3

 

Create a component by running the following command in the terminal - ng g c userComponent 

 

Step 4

 

Once the component is created, go to the userComponent.ts file and create a property called username as shown in the below code.

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

@Component({
  selector: 'app-username',
  templateUrl: './username.component.html',
  styleUrls: ['./username.component.css']
})
export class UsernameComponent implements OnInit {
  userName='';
  constructor() { }

  ngOnInit(): void {
  }

  checkResetUsername(){
   this.userName='';
  }
}

Step 4

 

Go to the username.component.html file and create a form which looks similar to below

 

 User Name: 

 

 Entered user name is,

 

 

<label>User Name</label>

<input type="text"
class="form-control"
[(ngModel)]="userName">
<p>Entered user name is:{{userName}}</p>

<button class="btn btn-primary"
style="background-color: darkblue;"
[disabled]="userName===''"
(click)="checkResetUsername()">Reset User</button>

In the above code the [(ngmodel)]="userName" is the one that represents two way data binding. 

 

Step 5

 

Finally add the reference to our newly created component in the app.component.html file

<div class="container">
  <div class="row">
    <div class="xs-col-12">
    <p>create a input field which updates the property ('username') via two way binding.Output the username via string interpolation(in a paragraph below the input), A reset button that gets enabled only when the username is empty and on clicking the username field is reset to empty string</p>
  </div>
</div>
  <div class="row">
    <app-username></app-username>
  </div>
</div>

Results

 

When username is entered in input field, the same value is displayed in the below line; i.e the entered value gets echoed which is two way data binding. Reset button works as expected.