What is behind Two-way data binding in Angular.

Ankit Maheshwari
Jan 2 · 5 min read

Data binding allows communication between a component and the DOM (HTML Template). There are four forms of data binding and their 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.


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

When an event happens (eg.: , , ) 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.


#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 ↓

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:
https://medium.com/@AnkitMaheshwariIn


If you wouldn’t mind giving it some claps 👏 👏 since it helped, I’d greatly appreciate it :) Help others find the article, so it can help them!

Always be clapping…



JavaScript in Plain English

Learn the web's most important programming language.

Ankit Maheshwari

Written by

👨‍💻 Developer | ✍ Blogger ( I rather enjoy coding because it gives me an experience of complete absorption, almost like meditation — If Truth Be Told. )

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade