Two-Way Data Binding

[00:00:00]
>> Alex Okrushko: The next step is our model. I said we have this search bar component, we're not using it yet. I'm going to start using it, so let's get to our search bar component. You know, collapsing source app is one of the features in the events feature. We have the search bar, and I put it here. In our search bar, which is already scaffolded, we're going to add the model.

[00:00:29]
We want to add the search bar here, so when we search for the events, we can filter the ones that we are only looking for. So this will be our query, and it'll be a model, and initially we'll say the body field is like empty. All right, so we have the model here. And now we'll have the input, let me just—but before we do that, let me add this app search bar to the component itself, so in our event list.

[00:01:05]
See, it says add search bar here. So you can go and add it there. Not much, it's very simple. It'll be app search bar, and it's the self-closing one, and we also need to—oh, it's already added here automatically, so it's auto-imported. But we do need to have an import. Any child that we use from anywhere, we have to have it in the imports.

[00:01:39]
So app search bar, and then we'll bind that search to a local variable, so let's do query, query to the search query. And this search query will be our local signal, so we'll have the search query, which would be our local signal and the page itself, and we'll initially say initially it's empty as well. So we have it.

[00:02:15]
I'm going to save. All right, bind query, that's right, because I need to save it here as well. If you don't save it, doesn't show. All right, so query, yes, that's right. This one's saved. This one saved search bar, search bar. Cool. Yes, so now we have it, and we can see this input to search. Right now we don't—if we search, it doesn't do anything, and it doesn't even update the model yet.

[00:02:53]
By the way, let's make sure that we can see these changes, so we add the search bar here, but we also want to see the results of this. So something that we're searching for, we'll have some paragraph. Let me actually just copy this paragraph. There you go. Right, so it tells, it'll tell us what we're searching for.

[00:03:23]
And she's searching for right now a type, nothing happens. Why is nothing happening? The reason nothing's happening is because we have our model here, but we're not using our model. The way we can use our model is two ways. First, for the input itself, we can bind the value. Bind the value to our query. The way we can read the value back, we can do it on a few things.

[00:04:13]
We can do it on input, for example. Can say query set this event. Right, oh no, so this is event, target value, because it's a different event. It's the entire input event, right? Input event HTML standard. So that's the way we can do it. That's one way, and let's see if it works. As you can see, it's working.

[00:04:39]
So now our input is communicated with the model and model communicating with the parent with the search query. That's one way, or we can use an alternative way. This is more like no imports kind of approach, or we can use another approach, and we can import again. This is import forms module, forms module, forms module.

[00:05:20]
That's right, from Angular forms. And by the way, we input for input event, we could have had a change event if we want to use a really inputted and then press enter or blur from it. But what we can do is again, we have imported this forms module, and then here we can bind to something that's called ng-model, like two-way binding.

[00:05:50]
And again, it's the same banana in the box syntax, ng-model, and then we don't pass just the, we pass the entire signal to it. Like, either way works, whatever is your flavor. You're free to choose, of course. And let's see if it works. Yes, it's working.