Angular Data Binding

angular data binding

Data-binding in AngularJS is quite similar to other popular libraries like React and Vue. It is the automatic synchronization of data between the model and view components. With this approach, the developer treats the model as the single-source-of-truth in the application. The view will always act as a projection of the model. This way, if the model changes, the view updates automatically, and vice versa. In this tutorial, we’ll see a few examples of how data binding in Angular works.

What is Data Binding In Angular

Databinding is a type of communication in Angular. In Angular, you have some TypeScript code that holds the business logic and a Template which is made up of HTML. In the TypeScript code, perhaps a calculation was done or some data has come down from a server, and now it is ready to be displayed to the user. This is dynamic data, and that dynamic data can be set up to bind to properties in the Template so the end-user can see it. This communication can happen both ways in fact, and this diagram shows us how.
angular databinding

String Interpolation

We’ll have a look at string interpolation first. Imagine our virtual machine has some data that describes it. It might have a name, status, and uptime. We can represent that data in the virtual-machine.component.ts file like so.

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

    selector: 'app-virtual-machine',
    templateUrl: './virtual-machine.component.html'
export class VirtualMachineComponent {
    vmName = 'Melvin';
    vmStatus = 'online';
    vmUptime = 225;

Now, we can use string interpolation to display this dynamic data in the template. The virtual-machine.component.html file is now updated to dynamically output the data. Angular uses the special double curly braces for this {{ }}. This tells Angular that what is between the double curly braces is variable, and to inspect that data and output it.

<h4>The {{ vmName }} VM is {{ vmStatus }} and has been up for {{ vmUptime }} days</h4>

angular string interpolation

Property Binding

Another way you can work with data is via property binding. To bind a property in a template file to data in the TypeScript file you can use the bracket notation [ ]. When you wrap the property with the square brackets, Angular will know to associate that property with the named data in the TypeScript component file. Consider this markup in virtual-machines.component.html.

<button [disabled]="!allowNewVm" class="btn btn-lg">Add a VM</button>

The disabled property is bound to the allowNewVm variable in virtual-machines.component.ts.

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

  selector: 'app-virtual-machines',
  templateUrl: './virtual-machines.component.html',
  styleUrls: ['./virtual-machines.component.css'],
export class VirtualMachinesComponent implements OnInit {

  allowNewVm = false;

  constructor() {
    setTimeout(() => {
      this.allowNewVm = true
    }, 1500);

  ngOnInit() {


Additionally, we have a simple arrow function in the constructor which sets this variable to true after 1.5 seconds. What this should give us is a disabled button on page load, but two seconds later the button should become active.

When To Use Property Binding and String Interpolation

In the property binding example above, a boolean value was being checked to see if a property should be enabled or not. This is a perfect use case for Property Binding. For cases where you want to actually output that data to the screen, String Interpolation might make sense. In fact, just to give us a better idea of how this works take a look at this file and the resulting output.

<button [disabled]="!allowNewVm" class="btn btn-lg">Add a VM</button>
the allowNewVm variable is currently <b>{{ allowNewVm }}</b>

You can see by the output above that as the allowNewVm variable changes between true or false, so too does the disabled or enabled state of the button. Cool!

This could also be accomplished by data binding the innerText property like so.

<button [disabled]="!allowNewVm" class="btn btn-lg">Add a VM</button>
the allowNewVm variable is currently <b [innerText]="allowNewVm"></b>

The result is the same. Since we had a wrapping <b> tag around the {{ allowNewVm }} originally, we can simply remove the curly braces and use that innerText binding. This is because innerText is referring to the space between an opening and closing html tag.

In general however, if you want to output something in the template go ahead and use String Interpolation. If you would like to change the property of an html element, directive, or component then you would use Property Binding. Don’t mix the two approaches together. Next up, we’ll learn about Angular Event Binding.