Binding in Angular
Binding is the process which forms connection between the application UI and the logic. It is a process that results in the automatic synchronization of the data and the view.
This article of binding will focus on interactions that occur within the same component, namely between the component class and the component template.
Let’s get started…
A single angular component has a class and a corresponding template that represents the view. We will look at how angular makes it possible to push data values into HTML controls and convert user replies into actions and how it manages the value changes.
Each form of binding in angular has a binding to the Dom, a binding from the Dom, or a binding in both ways. The double curly braces signify Interpolation, which is the first type. The second type of data binding is Property binding, which is denoted by square brackets and is one-way data binding from the component class to a property of an HTML element. Event binding, which is represented by parentheses, is a one-way binding from the HTML template to the component class. We can utilize event binding to run handlers in response to user interactions. Finally, Two-way binding combines property and event binding into a single notation consisting of parentheses enclosed by square brackets. The model and the view are always in sync thanks to the two-way binding syntax. Let’s look at some examples of each of the bindings.
Interpolation
Consider the following example. In this example, I’ve simplified the HTML in the app component so that it only shows Welcome Dolly” in a h1 tag. As a result, when you save the project and run it, the template appears in the browser.
We can see from the code that the name is static, so the message will always be “Welcome Dolly.” However, we want the name to be dynamic, so that when a new user enters the system, their name appears. To accomplish this, we add a new public property “name” of type string to the class and assign it the value “Dolly Talreja”. So, how do we incorporate this value into the template? The solution is double curly braces. Instead of writing Dolly in the HTML file, we use double curly braces and place the property, in this case “name,” inside them. This syntax of a property or expression inside the double curly braces is known as interpolation. We’re asking the browser to evaluate the expression inside the curly braces by using interpolation, so when we save the project and open the browser, we’ll see “Welcome Dolly Talreja.”
To summarize, interpolation enables you to include dynamic text in your HTML templates. Interpolation can be used to change what appears in the application view while it is running. By default, the syntax of interpolation is to write the property or expression inside the double curly braces.
Property Binding
Consider the following example. Let’s make a new public property called “myID” and give it the value “testID” and then we bind it to the HTML “id” property of the input element. The syntax is to enclose “id” within square brackets and then assign the property “myID” to this and if we save this and look at the browser, we can see that the “id” for this input element is set to “testID,” which is the value of the “myID” property. As a result, we are binding to the “id” property of this input element, resulting in property binding.
But the question is can we not use interpolation to bind to the “id” element, and the answer is YES. Instead of using square brackets and property binding, we can use the “myID” property inside the double curly braces and assign it to the input element’s “id” property. We will get the same results as above.
So, what is the point of property binding? Interpolation has a limitation in that it only works with string values, and there are HTML properties that are Boolean properties that we occasionally need to bind. Let’s take a look at an example.
Consider the disabled attribute of an input tag. Add it to the input element and now if we take a look at the browser, the input element will be unclickable and unusable.
Let’s try setting this disabled attribute to false; if you look at the browser again, you’ll notice that the input is still disabled.
As a result, boolean attributes such as disabled present a problem. When you add the disabled attribute, its presence alone sets the disabled property of the input to true, indicating that the input is disabled. Setting the value to false has no effect, and because it is a boolean attribute that requires true or false, even interpolation does not work, so even if we set this to false within double curly braces and return to the browser, the input is still disabled.
So the solution is to use property binding, so instead of using double curly braces, which does not work, we will enclose disabled within square brackets and assign it either true or false.
I can now type whatever I want into the input element. As a result, we can change the value of the disabled attribute with the help of property binding.
To summarize, property binding in Angular helps you set values for properties of HTML elements or directives. With property binding, you can do various things such as toggle button functionality, set paths programmatically, and share values between components.
Event Binding
So far, we’ve looked at data binding, in which the data flowed from the component class to the component template. When a class property is updated, the view is updated as well. However, in order to respond to user events such as clicks or keyboard events, data must flow from the template to the class, so we use event binding to capture events.
Let’s take a look at an example. Assume we have a button with the text “greet.” We want to display “welcome userName” when the user clicks on this button, so we need to listen to the click event on this button, and here is the syntax — within the opening tag of the button element, start with a Dom event you want to listen to, in our example we want to listen to the click event, and then enclose this event within parentheses. And to this, we assign the corresponding event handler, which is nothing more than a method in the component class. Let’s assign an event handler( greetings )on click and then define it in the class. In this example, we will be setting the property inside the greetings method i.e. assigning a name to the “userName” property.
Before clicking on the Greet button, we will not be able to see the userName.
After clicking on the Greet button, we can see the userName.
To summarize, event binding allows you to listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches.
Two-way Binding
When working with form inputs, it’s critical that your model and view are always in sync. Consider a login form, which has a username and password, and the component class, which has the corresponding properties username and password. When a user updates these inputs, your model or properties should receive those values automatically, and when the model or property value changes, your view should automatically reflect the updated values. To do this, angular provides us with a cool feature called two-way binding. It enables us to update both a property and a view at the same time. Angular provides a directive for this, known as the ngModel directive.
Let’s take a look at an example. Create a new property in the class, which will be public “name” and will be initially an empty string. Now, in the template, I’m going to add a new input element with the type text, and then I’m going to bind this property value using interpolation right next to the input element. So, when I type something in the input box, I want the property to be updated with this value, and as soon as the property is updated with that value, I want it to be shown here with interpolation, so that our view and the model are always in sync, which is what we are aiming for. As a result, we must employ the ngModel directive.
So, within the input element, add the directive ngModel, inside parentheses and square brackets i.e. [(ngModel)], also known as banana in a box notation. Okay, to this ngModel directive, we need to assign the property, which is the name property within quotes, so this should look familiar because we have square brackets for property binding, which is data flow from the class to the template, and parentheses for event binding, which is data flow from the template to the class, and thus two-way binding.
If you save the project and go to the browser, you will see an error because ngModel isn’t a know property of input element. Angular is unaware of the ngModel directive because it is in a separate module called the forms module. So add that module to the application, open app.module.ts file and import the FormsModule and then add it to the imports array, so next to BrowserModule add a comma and then FormsModule, so now if we save this and go over to the browser we can see that we have the input box and it is empty and if I start typing something like “Dolly Talreja” we can see that the same text is being written. This is a two-way binding: the value flows from the input to the class property, and the value flows from the class property back to the template and this ensures that the view and property values are always consistent.
To summarize, two-way data binding is a two-way interaction, data flows in both ways (from component to views and views to component). You can also use two-way binding to listen for events and update values simultaneously between parent and child components.
To conclude, Data binding automatically keeps your page up-to-date based on your application’s state. It is a technique to link your data to your view layer. In simple words, one can say that it is a communication between your typescript code of the component and the template that the user sees. You use it for various purposes such as to specify things like the source of an image, the state of a button, or data for a particular user.
