Angular Data Binding

Angular Data Binding

Angular Data Binding

So far we have learned about the Component and how to create our own component. Now it’s time to learn about data binding. So let’s get started.

What is data binding

I will try to explain data binding in very simple term as below.

“Data binding is basically communication between the Component and the Template”.

I hope you understand what is data binding, if not let’s look at the below diagram which will explain it in details.

Angular Data Binding


Let’s start writing some examples. Please make sure your project “hello-world” is running.

Create a new Component

For this example, we will create our separate component. We can create our component manually or we can simple invoke the below command which will automatically create our component and it’s required files. It also register the newly created component in our module “AppModule”.

Now let’s Open command prompt then go to your project directory and invoke the below command.

E:\angular\apps\hello-world>ng g c ang-binding --spec false

This will create new component “ang-binding” and it’s corresponding files inside src folder.

angular new component

Create new property

Now let’s create a new property and bind it to the template. Open the component file and add new property.


import { Component, OnInit } from '@angular/core';
  selector: 'app-ang-binding',
  templateUrl: './ang-binding.component.html',
  styleUrls: ['./ang-binding.component.css']
export class AngBindingComponent implements OnInit {
  message: string = "Welcome to the data binding example";
  constructor() { }
  ngOnInit() { }

As you can see in above component, we have created a new property “message” of type string and assigned it some literal value.

Bind the property with template

Now let’s bind the property which we created in our component file with the template by simple using “String Interpolation” mechanism.


 Message from the Component : {{message}}

Invoke the component

Now just invoke our component by simply using custom HTML tag or component selector as below.




Now you should be able to see the output as below.

Angular Data Binding


Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *