DEFAULT HEADER TEXT
This time we are going to tackle Angular Data Binding Basics. Data binding is a powerful, and helpful tool that can save you a lot of coding. Binding data is easy in Angular, and we are confident that by the time you finish reading this article, you will have a good feel for how to apply it to your projects.
For the examples in this post, we are going to use a new project created with the Angular CLI. If you are not familiar with the Angular CLI or you’re starting a new project, we recommend our article that tackles those problems: Angular CLI For Beginners – Your first Angular Application.
Once you have the new project created, have the CLI start the project, and open it in your browser.
Getting Started
Let’s get started with some Angular data binding basics.
Start the Angular CLI
Begin by typing ng serve into the command prompt from within the my-first-angular-application directory. Starting the CLI should allow you to see the Angular Welcome page in your browser. We are going to try our Angular data binding basics on this page.
Data Binding
There are two types of data binding: one-way, and two-way.
One-Way Data Binding
As the name suggests, one-way data binding allows you to bind data in one direction only. You can either pass data to the DOM from the component or, you can pass data from the component to the DOM.
There are three ways to accomplish one-way data binding with Angular. You can bind the data using interpolation, property binding, or event binding. We’ll give you a few examples of each type of these data binding basics to help you get a better feel for how they work.
Interpolation
Interpolation is an example of a component to DOM data binding. It uses matching double curly braces in your HTML markup like these {{ }}. Between the double curly braces, you use a JavaScript expression that Angular can evaluate and convert to a string.
Example 1 – Literal
To try out interpolation, navigate to your app.componen.html file. On line 352 of that file, you should see some markup that looks like Example 1A.
Example 1A
https://gist.github.com/kevinchisholm/d76c1e714812c6dc4cf9f7713c3508d2
Let’s add the double curly braces and a simple expression, so it looks like Example 1B.
Example 1B
https://gist.github.com/kevinchisholm/e0b9970c6ee2da06a47dea514dd38de5
Once you make the changes and save the file, you can see the change in the browser. You should see Resources 4.
Some expressions are not supported, like assignments and incrementing/decrementing, and you can only have one expression.
Example 2 – Property
Interpolation usually displays a class property we set somewhere else. Navigate to the app.component.ts file and add the line name = ‘my-first-angular-application’, as seen in Example 2A. We are adding the property name to the class AppComponent.
Example 2A
https://gist.github.com/kevinchisholm/e05bfdef384b41f9a24082c8911a315e
Once you complete the changes and save the app.component.ts file, you can navigate back to the app.component.html file and add the name property between the curly brackets instead of the statement, as seen in Example 2B.
Example 2B
https://gist.github.com/kevinchisholm/03c73e3c0d2613461ba94af6bb74dae9
Save the app.component.html file, and you can see in your browser that Angular is displaying the property that you have set.
Now that you know what you are looking at, you can see another example of this a few lines earlier in the app.component.html file at line 344 as seen is example 2C.
Example 2C
https://gist.github.com/kevinchisholm/79301916e54d1da99e6f920398f4b2e2
This line of code is telling Angular to display another property of AppComponent called title, and you can look once again at the app.component.ts file (Example 2A) to see this property inside the AppComponent class.
Example 3 – Method
You can also use interpolation to call methods. If you navigate back to the app.component.ts file, you can add the method myMethod(), as seen in Example 3A.
Example 3A
https://gist.github.com/kevinchisholm/841833a8f76e4b535f9f2010290867e0
Then, in the app.coomponent.ts file, you can use the double curly braces to call the method, as seen in Example 3B.
Example 3B
https://gist.github.com/kevinchisholm/243f4954dfaac85329ad08d8d1673084
Property Binding
Another way to approach Angular data binding basics is to use property binding. Property binding is another example of a component to DOM data binding, and it allows Angular to use the HTML elements DOM properties. The syntax for Angular property binding is to put the HTML DOM property in square brackets and set it equal to the class property inside the HTML tag like this: <h1 [DOMproperty] = classproperty></h>.
Example 4
In Example 4, we are going to use the DOM property textContent to display the name property we created. Check out the code in Example 4A.
Example 4A
https://gist.github.com/kevinchisholm/8667ae875e511bf1e37d6a59ef629203
If you run this code and check your browser, you will see that you end up with the same result that you did with interpolation in Example 2B.
We can also use property binding call methods. In Example 4B, we replace the name property with the myMethod method and get the same results in our browser that we get with Example 3B.
Example 4B
https://gist.github.com/kevinchisholm/42353e196a50fd91bd3b96758866ce21
We can also write the same thing another way. We can remove the square brackets around the DOM property and put the class property in the interpolation double curly brackets, as you can see in Example 4C. Checking the browser, you will see the same result.
Example 4C
https://gist.github.com/kevinchisholm/eca06aea96f606483d2a6826d64b7eed
Event Binding
One example of DOM to component data binding in Angular is Event Binding. Event binding in Angular allows you to set up event handlers inside your components. We can use events to call methods from within our components by placing the event inside parentheses and setting it equal to the method in quotes inside an HTML tag like this: <h1 (event) = “method”></h1>.
Example 5
We’ll try this idea by using the click event on the H1 tag we have been using. Navigate to the app.component.ts page first and add the myEvent method to the component, as we see in Example 5A.
Example 5A
https://gist.github.com/kevinchisholm/b6df6efe3da73c4928f5654671f109b0
Then, navigate to the app.component.html page, add the click event to the H1 element, and set it equal to your myEvent method, as you see in Example 5B.
Example 5B
https://gist.github.com/kevinchisholm/d31882153cdffbef9c058493b7035406
After you have added this code and saved your work, navigate to the browser and open the JavaScript console. Each time you click on the word “Resources,” Angular will call the myEvent method, which will print “Click!” to the console window.
You can see several more examples of real-world event binding if you scroll down past line 389 of the app.component.html. These examples look like Example 5C.
Example 5C
https://gist.github.com/kevinchisholm/0aab6974c5ade9ae9115b8bee7e57521
Two-Way Data Binding
Two-way data binding allows the component to exchange data with the DOM, and it also allows the DOM to exchange data with the component. You can accomplish two-way binding easily by using the ngModel directive in Angular. The syntax looks like this: [(ngModel)]=”someVariable”.
You can try out two-way binding yourself by adding the code in Example 6 to your project.
Example 6
https://gist.github.com/kevinchisholm/0b73e4bab16cf009cdefea00d20344f3
In this code, we can see that the ngModel is inside an input element and is set equal to myMessage. In the next line, We use interpolation to print the value of myMessage to the screen.
If you check your browser, you will see that you can now type into an input box, and the message will appear as you type. We think you‘ll agree that ngModel is a reasonably painless way to add two-way data binding.
Another important thing about the code in Example 6 is that if you look closely, you’ll notice the square brackets, parentheses, and the double curly brackets we used when we were talking about one-way data binding. The similarity is because what’s really happening here, is that we are using two one-way data bindings at once, and ngModel is taking care of the work behind the scenes.
You can create custom two-way data bindings in Angular that don’t use ngModel, but that’s outside the scope of this article.
Conclusion
Our hope is that you can see how data binding is a powerful asset provided by Angular, and we have just barely scratched the surface of what is possible. There are dozens of DOM methods at your disposal, besides the textComment that we use in this Angular data binding basics guide, and you are not limited to built-in elements like the H1 tag. You can create new elements and use them the same way. There are plenty of other events besides the click that can trigger calls to methods within your components, and you can create two-way bindings that are a bit more complex, but every bit as powerful as ngModel.
If you have learned something new and enjoyed reading over these examples, please share this guide to Angular data binding basics on Facebook and Twitter.
