Two-way binding in Angular with Example

When you create a variable or property to data, it is called as data binding in Angular. There are generally two types of binding.

• Property binding
• Event binding

When you set values for property to HTML elements or directives, it is called property binding. Property bindind is used to work in HTML, like input value, dynamic CSS or Javascript, sharing data with components etc. To bind property in HTML element, Angular uses square brackets[] for property binding.

Example:

In your component, i.e. app.component.ts you define:

imageUrl = '../assets/logo.png';

And you bind its value in HTML app.component.html as follow:

<img [src]="imageUrl">

Event binding allows you to listen for events like click, mouse hover etc. It works same as Javascript events. In Angular, you define event name in () round brackets and its value is the method in component which will do task when the event occurs.

Example:

You define event in HTML view. app.component.html

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

And in your component class, app.component.ts you set onSave() method which will listen click event on button.

Now let's come to the main point, What is two-way binding?

In a two-way binding, A component shares property data to HTML view and HTML event sends data to component. Two-way binding combines both property binding and event binding. Angular two-way binding syntax contains square brackets and round brackets[()]. Square bracket for property binding and round bracket for event binding.

In this tutorial example, we will bind text box with property. When user changes textbox value, it will send data to comoponent and it will update HTML view. We will start from fresh new Angular application. You can install and setup new Angular project in this article[https://hackthestuff.com/article/how-to-install-and-setup-new-angular-project-from-the-scratch].

In the starting first add a username property in component class app.component.ts.

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

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

In your HTML view, add textbox which binds username property. On its value change, ngModel will update its value which ultimately change its value in h1 tag.

<form action="#">
  <h1>{{ username }}</h1>
  <label for="name">Name:</label>
  <input [(ngModel)]="username" id="username" name="username" placeholder="username">
</form>

As we are using form elements, we need to import FormsModule in app.module.ts. Open AppModule class and update it as following:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

If you want to give style to form, you can add CSS to app.component.css

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #384047;
}
h1 {
  margin: 0 0 30px 0;
  text-align: center;
}
form {
  max-width: 300px;
  margin: 10px auto;
  padding: 10px 20px;
  background: #f4f7f8;
  border-radius: 8px;
}
input {
  background: rgba(255,255,255,0.1);
  border: none;
  font-size: 16px;
  height: auto;
  margin: 0;
  outline: 0;
  padding: 15px;
  width: 100%;
  background-color: #e8eeef;
  color: #8a97a0;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
  margin-bottom: 30px;
}
label {
  display: block;
  margin-bottom: 8px;
}

Now run the Angular server with following command:

ng serve --open

It will open the form in default browser. Change the value in textbox. It will also reflect value in h1 <tag>.

So this is how two-way binding works. We have implemented in as single component. In a next tutorial, we will see how we can share data between child component and parent component.

If you liked the article, please do like our Facebook page and follow us on Twitter.