Angular For Beginners - Part Three - Data Binding In Angular

This is part 3 of the "Angular for Beginners" series. It is a continuation of the earlier parts mentioned below:

• Part 1 of this series discussed how to get started with Angular.
• Part 2 discussed the basic tenants of Angular- Modules, Components, and Directives.

Part 3 here further builds up the demo code created in earlier parts. So, it is strongly advised that you go through them before proceeding further.

Data Binding in Angular

There are four types of binding in Angular.

Interpolation

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

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

Property Binding

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

In property binding, the element HTML property values in DOM are set from the component. The background of the row is set based on the component property value.

Event Binding

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

Let’s have a look at it in the code.

We will add a button in our HTML code as below.

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

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

Let’s 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 function in the component. Initially, the value of the ‘information’ variable is set to empty. On click of the button, some value is set in the OnClickInformation function. 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 the binding from component to DOM and vice versa. Let’s see this in action. Two-way data binding uses ngModel.

Type in the following piece of code into your HTML file.

<div>
   <label>name:
    <input [(ngModel)]="name" placeholder=" Type your name here">
  </label>
  Hi {{name}} !!
</div>

 

The name property is defined in the component as below.

 

1	name:string

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

 

Let’s go to our browser and see what happens.

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

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

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

The next part in this series talks about using the interfaces in Angular. Happy Learning!

This article was originally published on my website taagung.