One-way and Two-way Data Binding in Angular

Jan 17, 2019 • 6 Minute Read

Introduction

One-way and two-way data binding are two of the important ways by which we can exchange data from component to DOM and vice-versa. Data exchange between the component and the view will help us to build dynamic and interactive web applications.

One-way Data Binding

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

From Component to View

There are different techniques of data binding which use one-way data binding to bind data from component to view. Below are some of the techniques, which uses one-way data binding.

Interpolation Binding: Interpolation refers to binding expressions into marked up language.
Property Binding: Property binding is used to set a property of a view element. The binding sets the property to the value of a template expression.
Attribute Binding: Attribute binding is used to set a attribute property of a view element.
Class Binding: Class binding is used to set a class property of a view element.
Style Binding: Style binding is used to set a style of a view element.

Let's consider an example using the interpolation technique where we are binding two values, firstName and the lastName, to the view, enclosed in double curly braces: {{property Name}}.

In this example, the data binding is done from component to the view. Any changes to the values in the component will be reflected in the view not vice-versa.

File Name: app.component.ts

      import { Component } from "@angular/core";
@Component({
  selector: 'app-example',
  template: `
              <div>
              <strong>{{firstName}}</strong>
               <strong>{{lastName}}</strong>
              </div>
              `
})

export class AppComponent {
  firstName: string = "Yallaling";
  lastName:string = "Goudar";
}
    

Let's consider another example using property binding. In this example, we are binding one value, firstName, to the innerHTML property of the span tag. It will bind the value of firstName to the span element.

      import { Component } from "@angular/core";
@Component({
   selector: 'app-example',
  template: `
              <div>
              <span [innerHTML]='firstName'></span>                
              </div>
              `
})
export class AppComponent {
  firstName: string = "Yallaling";
}
    

Let's consider one more example of style binding. In this example, we are binding a color style to the 'h1' element. It will display the text within the h1 tags in a blue color.

      <h1 [style.color]="blue">This is a Blue Heading</h1>

From View to Component

One-way data binding from view to the component can be achieved by using the event binding technique.

Let's consider an example where within parentheses on the left of the equal sign we have the target event like "click" and on the right side we may have the template statements such as component properties and methods(myFunction() in this case) bind to the event.

      <button (click)="myFunction()">Show alert</button>

In the above code, the myFunction() method in the component will be called when user clicks on the button.

Filename app.component.ts

      import { Component } from "@angular/core"; 
 @Component({ 
    selector: 'app-example', 
   template: `<button (click)='myFunction()' >Show alert</button>` 
 }) 
 export class AppComponent { 
   myFunction(): void { 
       alert('Show alert!'); 
   } 
}
    

Once you run the above code, you will see a button with text "Show alert". When you click that button, it will call the myFunction() method in the component, which will, in turn, execute the alert() method, showing an alert box with the text "Show an alert".

Two-way Data Binding in Angular

Two-way data binding in Angular will help users to exchange data from the component to view and from view to the component. It will help users to establish communication bi-directionally.

Two-way data binding can be achieved using a ngModel directive in Angular. The below syntax shows the data binding using [(ngModel)], which is basically the combination of both the square brackets of property binding and parentheses of the event binding.

      <input type="text" [(ngModel)] = 'val' />

Before using ngModel to achieve two-way data binding, it’s very important to import the FormsModule from @angular/forms in app.module.ts file as shown below. FormsModule will contain the ngModule directive.

Filename app.module.ts

      import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from "@angular/forms"; 
 import { AppComponent } from './app.component'; 
import { FormsModule } from "@angular/forms";
 @NgModule({ 
   imports: [BrowserModule, FormsModule], 
   declarations: [ AppComponent], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }
    

If you do not import the FormsModule, then you will get Template parse errors and it will result in this error:

"Can't bind to 'ngModel' since it is not a known property of 'input'".

After importing the FormsModule, you can go ahead and bind data using [(ngModel)] as shown below.

      import { Component } from '@angular/core'; 
 @Component({ 
   selector: 'app-example', 
   template: ` 
               Enter the value  : <input [(ngModel)] ='val'> 
               <br> 
                Entered value is:  {{val}} 
             ` 
}) 
export class AppComponent { 
   val: string = ''; 
}
    

Once we run the above code, we will see an input box asking us to enter a value in the view. Any value entered in that input box will be bound with the text below. Let's assume a user entered the text "John", then the text will be "Entered value is: John".

Conclusion

In this guide we saw two important ways to bind data in Angular and how can we achieve them using the different techniques.

I hope this guide has been helpful for you. If you would like to explore more concepts on Angular, check out my previous guide: [Angular Data Binding Overview] (/guides/angular-data-binding-overview).

Learn More

Explore these Angular courses from Pluralsight to continue learning: