Data Binding in Angular

There are two types of data binding in Angular.
1) One way binding
2) Two way binding

Data binding is nothing but the communication between the template(HTML) and the TypeScript (Business logic) file.

One way binding:

String Interpolation:

→ It is a one-way data binding method. (From TS to HTML).

→ Here we have a property title in the app.component.ts file.

→ Here we have used the double curly braces in the h1 tag and we have mentioned the property name.

Now the output will look like this.

Property Binding:

→ This is also an one way data binding method.

→ Here we can bind the properties of the HTML element dynamically using property binding.

→ In the button tag we have used the disabled property and set the value to disableButton property/variable.

→ Here in the TS file we have set the value of the disableButton property to false.

Now, the button is disabled since we have set the disabled property to true. If we set it to false, the button will be enabled.

Event Binding:

→ In Event binding the flow is from the HTML to Typescript. It is the opposite of string interpolation and property binding.

→ It reacts to the events done by the user like click event.

→ Here, we have added a click event to the button element and mentioned the onClick() method. The onClick method is present in the TS class.

→ If the user clicks the button, the click event will be triggered and the onClick method will be invoked.

→ So, the data flow is from HTML to TS, which is the opposite of string interpolation and property binding. But still this is an one-way data binding method.

Now, if the user clicks the button, onClick method will be triggered and an alert box shows up in the browser.

Two way Binding:

→ In two way binding the data flows in both the directions. (i.e) from HTML to TS and from TS to HTML.

→ It is the combination of both event binding and property binding.

Here in the input element we have used the ngModel directive and assigned a property ‘name’ to it. Also I have binded the ‘name’ property to a paragraph tag. Initially the ‘name’ property is set to empty string.

If the user types something in the input box, that text will be set to the paragraph element down below.

When the user types something in the input box, the value will be sent to the TS file and the value will be set to the ‘name’ property.

And, now the data flows back from the TS file, (i.e) the value of the ‘name’ property comes back to the HTML file and it is set to the paragraph element and we can parallelly see the text changes in the browser. This is known as two-way data binding.