Angular Tutorial for Beginners : Part 3 - Data Binding

Author
Recent Posts

Tuba Mansoor

She works with an IT major. Normally she doesn't speak much but when she speaks, I bet she can make you speechless. Total nerd and travel buff Tuba can be seen passionately doing gyms, Netflix or sharing experiences through excellent blogs. If not then you can find her learning something new. Yes, She knows 4 languages – English, Hindi, Marathi, and German.

Data Binding in Angular

There are four types of data binding in Angular:

Interpolation

We have already used interpolation in our code, when we displayed the employee fields in our table.

It is denoted as {{value}} and is used to pass value from the component to the DOM.

Property Binding

We used property binding in our code, when we binded the property of the NgStyle element property to values from our component.ts file.

In property binding, element html property values in DOM are set from the component.

Event Binding

The above two types are used to pass value from the component to the DOM. Event binding is used to pass value from the DOM to the component.

Lets have a look at it in the code.

We will add a button in our html code as follows:

<button (click)="onClickInformation()">Information</button>
{{information}}

On button click we are calling a function onClickInformation(). This function is defined in the component file.

Lets define this function in the component file.

  information = '';
  onClickInformation() {    this.information = 'This is a list of employees';  }

Here through event binding we are calling the onClickInformation in the component. Initially the value of the ‘information’ variable is set to empty. On click of the button, some value is set in it. This value is then displayed in DOM through interpolation.

So, on button click, we can see the following in the browser.

Two way data binding

As the name suggests, this provides binding from component to DOM and vice versa. Lets see this in action. Two way data binding uses ngModel.

Type in the following piece of code into your html file:

The name property is defined in the component as follows:

name:string

To ngModel directive that we just used, is present in the formsModule. So we need to import it in our app.module.ts file as below:

Lets go to our browser and see what happens:

You will find that whatever you write in the textbox is reflected next to it.

So here we have a string property ‘name’ that is defined in the component file. It’s value is set in the DOM equal to the value in the textbox. So value is passed from DOM to component. At the same time its value is passed back from component to DOM through interpolation and you can see it next to it. So the value in the view and the model is same at all times. This is two way binding.

It is denoted as [()] notation which is also known as banana in a box notation.

This concludes this article on data binding. For more information the official Angular website is a good place to explore.

In the next part of the Angular Tutorial for Beginners series we continue to understand interfaces in Angular.

A printable version of this article can be found here.

Contents of the Angular Tutorial for Beginners series:

Part 1: Getting Started

Part 2: Modules, Components & Directives in Angular.

Part 3: Data binding in angular.

Part 4 : Interfaces

Part 5: Services in Angular

Part 6: Http Requests with Observables.

Part 7: Pipes in Angular