In this lesson, we will learn the concept of binding the data onto the template of a component. You now know what components are and about the following 4 files that are generated when a component is created:

• TypeScript class file
• HTML file
• Styling file (CSS/SCSS/LESS)
• Spec File (Unit tests)

In the TypeScript code of our component, we would have some data that is supposed to be displayed on the view. This is known as binding the data from the component class to the component template.

There are different ways of binding the data that is either defined locally in your component or is received as a response from an API.

Data Binding techniques

In this section, we will look at the following data binding techniques along with examples.

• Interpolation
• Property binding
• Event binding
• Two-way data binding

Let us discuss each of these one by one and with examples.

Interpolation

Interpolation is used to bind the value of a variable defined in the component class to a UI element. To interpolate a piece of data, simply put the elements inside curly braces in your HTML file.

First Name: {{name}}

The value assigned to the variable name in your TypeScript file is, thus, displayed with the help of interpolation.

Whether you are looping an array that you got from the back-end or a Boolean value that you have defined in the component, the display of any property on HTML works through interpolation.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'I am the parent Component passing into child one';
}

And the template should look something like this:

<div class="container"><h1>Welcome to {{title}}</h1></div>

Interpolation is widely used to display data across components. The syntax of interpolation is:

{{...}}

Property binding

Property binding is another useful way of binding the property value of an element with the variable name. For example, we want a button with a specific height. So, we’ll set the button’s height property to a value or the variable holding the value on the template. This is done by binding the property to the value using square brackets.

The syntax for property binding is:

[...]

Let’s have a look at an example:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'I am the parent Component passing into child one';
  height: number = 20;
}

template:

<button [style.height.px]='height'>Close</button>

Property binding is also used to assign the value of a variable in the child component from the parent component.

Example

Inside the app component, you use another component as its child, and this child component has a property titleValue that expects its value from the invoking component (parent). We can pass it using:

<app-child [titleValue]="title">
</app-child>

Event binding

The two bindings that we discussed earlier are one-way data binding, from the component to the template. However, there are times where you would need to send data the other way, meaning from the template to the component. For example, a user response or a click event that happens on the template, and you want to perform some action on that click.

This is where Event binding comes into the picture.

The syntax for event binding is:

(...)

Let’s see an example now:

Template:

<button (click)="displayValue()">Get results</button>

Component:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
   public title = 'I am the parent Component';

   public displayValue() {
    // Perform operation
   }
}

This is also a one-way binding of data but the other way round, i.e., from template to component.

How about the use case when you need two-way data binding?

Let’s look at that now:

Two-way data binding