From the course: Learning Angular

Working with two-way data binding - Angular Tutorial

From the course: Learning Angular

Start my 1-month free trial

Working with two-way data binding

- You already know how to bind an event to a component, and also how to use a property to modify an HTML element. Angular provides a way to do both at the same time. This technique is known as Two-way Data Binding. Two-way Data Binding is especially useful with form elements and there are two different types of notations for the different types of fields that you might be trying to access. The first allows you to track the value of any input field and it's call ngModel. The second is for form elements that are not input fields so that is called an ngControl. Notice the camel-key thing with ngb lowercase and then the capital letter after that. In order to use this we're going to need to import a separate module that will give you some additional abilities for form elements. Let's take a look at how that works. So, here we have our form and what we want to do is go ahead and track the value of whatever we type in here and make that the query, 'cuz you remember we're going to take these different elements and reduce them based on the value of whatever we type in here. So, to do that, I'm going to modify my input field. This is just a normal input field so it's going to get a notation that is ngModel and I'm going to combine both the square brackets and the regular parentheses and type in the words ngModel here. And, then I'm going to just ask it to track my query variable which we've seen in other places. And, that's all we need to do in the component, but if we try to work with that right now you'll notice that nothing is going to happen right here. There's actually an error that we can look at in the console, so if you look here you'll see that it's giving you a long error that says, ngMOdel isn't a known property of input. And the reason it's doing that is because we haven't really explained what an ngModel is. Angular, as I mentioned earlier is very modular itself so, it doesn't load up every feature into your application, you have to load different features separately. The one that we need comes from something called a forms module. So, we'll add an additional import, right here and, this will be forms module, and we'll need to add that from Angular slash forms. So, we'll also need to add this under imports right here so, in addition to browser module we're going to use this forms module. And, let's go ahead and save that. And, once you do that you'll see that everything comes back. And now, if I type something in here, it's going to automatically show it to me as I type it, so, I type in the name Barot here, it's going to display it in this area right here. Which is what we want. And, we do that through this combination of something that allows you to track an input field and modify a value of a variable. It's pretty useful and it's something that you really need to be able to do with form elements. Providing a powerful way to track changes on any input fields as well as other types of form elements.

Contents