What is behind Two-way data binding in Angular.


4 min read
What is behind Two-way data binding in Angular.

Data binding allows communication between a component and the DOM (HTML Template). There are four forms of data binding and there uses depends on how data is flowing.

#1 Interpolation: {{ value }}

Interpolation allows us to display the value of a property (variable) from the component to the DOM (HTML Template).

<li>Name: {{ userName }}</li>
<li>Email: {{ userEmail }}</li>

#2 Property binding: [property]="value"

Property binding allows us to pass the value of a variable from the component to the specified property - here the term property means simple html attribute:

<input type="email" [value]="userEmail">

In this example☝️, the type and value are the properties of an <input> tag.

Two more examples of Property binding:
1. One that applied to a background-color.
2. Second that applied to a class name, if isSelected evaluates to true.

<!-- apply background-color to div -->
<div [style.background-color]="selectedColor">

<!-- class 'selected' will be applied to div, if the value of 'isSelected' becomes 'true' -->
<div [class.selected]="isSelected">

#3 Event binding: (event)="function"

When an event happens (eg.: click, change, keyup) from DOM that call the specified method of the component.

<button (click)="registerUser()"></button>

In this example☝️, the registerUser() method of the component will be called when the button is clicked - because the button has (click) event.


Now comes 'Two-way data binding'

#4 Two-way data binding: [(ngModel)]="value"

Banana in a box syntax [( )]
* Where box is →  [ ]
* Where banana is →  ( )

Two-way data binding allows to have the data flow both ways.
In this example ↓

<input type="email" [(ngModel)]="userEmail">
  • The data property userEmail (defined in the component) is used as the value for the input tag.
  • (Reverse case) → But if the user changes the value of input (by typing in input field), the component property userEmail (defined in the component) will gets updated automatically.
  • Means property value change from component → will be updated to input. And change from input → will be updated to component property.

So-far-so, we have seen 'Two-way data binding' using ngModel.

<input type="email" [(ngModel)]="userEmail">

<p>Hello {{userEmail}}!</p>

How does this all work?

Two-way data binding in Angular, using [(ngModel)] can be break down to two steps → Property binding and Event binding.

Actually there is no such thing as two-way data binding.
Even without the 'ngModel' directive, we could easily implement two-way data binding.
Yes it's possible, see this example ↓

<input [value]="userEmail" (input)="userEmail = $event.target.value">

<p>Hello {{userEmail}}!</p>

Let’s take a closer look at what’s going on here:
(we are breaking down the above code)

  • [value]="userEmail" - Binds the expression userEmail to the value property of input element. See the difference↓

    ↓ Before adding boxes [ ]  to the value property.
    <input value="userEmail"> here value is a property, actually having it's value="userEmail".

    ↓ After adding boxes [ ]  to the value property.
    <input [value]="userEmail"> here [value] is a property having 'userEmail' as an expression (not value), means 'userEmail' is itself a variable having some value.

  • (input)="expression" - Is a declarative way of binding an 'event expression' to the input element’s. See this↓

    Before adding banana () to the input property↓
    <input [value]="userEmail" input="Its of No Use"> this input property is of no use its a plain property.

    After adding banana () to the input property↓
    <input (input)="userEmail == $event.target.value"> this (input) property within banana is very useful, it always takes value from the $event.target and assign into userEmail. Means variable userEmail will have value we enter in <input> tag.

  • userEmail = $event.target.value - This expression gets executed when the input event is fired, means when we enter value in <input> tag.

  • $event - Is an expression exposed in event bindings by Angular, which has the value of the event’s payload.

Now, what is the payload of the input event? It’s an InputEventObject.
$event which comes with a target property from which we get the actual value of the input. Like $event.target.value
The input event fires when the value of an <input>, <select>, or <textarea> element has been changed.


Understanding of 'ngModel'

Actually ngModel comes with a property and event binding as well. Here’s what our example looks like using ngModel

<input [ngModel]="userEmail" (ngModelChange)="userEmail = $event">

<p>Hello {{userEmail}}!</p>

That is the reason we use box [ ] with banana ( ) that is property [] with event () binding. Look below ↓ the same code with two-way data binding.
In that case (ngModelChange) does not required.

<input [(ngModel)]="userEmail">

<p>Hello {{userEmail}}!</p>

Conclusion

#1 Interpolation: {{ value }}
#2 Property binding: [property]="value"
#3 Event binding: (event)="function"
#4 Two-way data binding: [(ngModel)]="value"

👉 #4 = #2 + #3 👈


Done! 🤩 It’s that simple to understand 'Two-way data binding in Angular'.

See you later 👋👋


Feel free to comment down in the comment box… If I missed anything or anything is incorrect or anything does not works for you :)
Stay connected for more articles.

GO TOP

🎉 You've successfully subscribed to Code with Chintan!
OK