Types of Data Binding in Angular 5


In this lesson, we are looking out the Types of data binding in Angular 5. There are many ways to bind the data in angular so we are looking those examples one by one. In angular 5 you can bind data with interpolation method, property binding method, and event binding method.

Interpolation allows us to bind data using properties of the component’s class. So this property is communicated with the template design.

Property binding is the exactly the same way of interpolation data binding. But here we will set the properties and attributes of the HTML elements.

Event binding is one of the major important data bindings in angular. Using this method you can bind an event to the HTML elements. Using this method you can communicate with the components methods and properties.

So let’s understand it one by one.

Interpolation

In interpolation, you can bind the component properties with the template. Interpolation allows us to bind component properties with the HTML elements using {{ }} double curly brackets. Now if you wanted to bind the component property to the HTML element you can bind like this {{ componentProperty }}.

look at the example now.

app.component.ts

In this code, we created a counter property of number type. Now we will access this property in our HTML template file.

app.component.html

In this code, we had bound the counter property using curly brackets.

The result would be this.

Interpolation Data Binding Angular 5

Property Binding

In the second method of binding angular data is property binding. In this method, you can bind angular data using the brackets [ ]. What you have to do is you just need to create a property in the component and access it with the bracket. we will use this bracket as HTML element.

Let’s look out the example now.

app.component.ts

In this file, we had created a component property btnText assign string type to it and specify Binding Data Text to this property. Now we will bind this property to the HTML element using attribute.

app.component.html

In this code, we will just put the caption on the top and added the input type submit button. after this, we will link the bootstrap button classes to this button and then add margin.

To specify value we use [ ] brackets. Using brackets we will bind the value from the component property.

Another way to bind the data to HTML attributes is using interpolation.

Here is the example

You will see we just remove the brackets and in the value text area, we put the interpolation.

Here is the result.

Property Binding in Angular 5

Event Binding

So the time is to understand event binding. Event data binding is similar to the property binding but here we will call the Method except for property. In event binding, we will create a method and return a value this value will bind to the HTML element.

Let’s look out the example Now.

app.component.ts

Here in this code, we created a btnText property of type string. Then we had created an OnCall() Method and specify text to thie btnText property and return to the method.

app.component.html

So here you will see input type submit button we created a click event. we bind this event we use parentheses ( ) sign. Using open and closing parentheses we will bind the event. and then specify the method in the double cotes.

Now here what is happening is when you click on the button data will be bind to the component property and display on the browser.

Here is the result

Event Binding Angular 5

Two-Way Data Binding

In two-way data binding, we will bind data using the ngModel directive. Using ngModel we will dynamically show the data in the template. This method is the old method of angular. This method is mostly used in the angularJs. Now angularJs became an angular.

To bind this method we will just use the ngModel directive in the app.module.ts file and import it in the import array.

app.module.ts

After that, we will create a component property and access it in the HTML file.

app.component.ts

In this file, we will create a component property and specify the value to it.

app.component.html

In this file, we will create a simple template design and create a textbox. In this textbox, we will use the placeholder and ngModel Property and specify the component property to it.

Here is the example.

In the end, we will create a simple heading level 5 tag and specify the component property to it.

The result would be this.

Two-way Data Binding Angular 5

 I think I explain everything to you of Types of Data Binding in Angular 5.

Unforctunetally, if anything remaining to explain you then must comment me what did the thing which you do not understand.

If you have any question then comment me in the comment section.

Thank You.

Leave a Reply

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