Angular - 2.17-Transmit and use data with event link

In the last course, we reviewed the event link. Now, before we focus on the two-way link and explain what it is, there’s another important thing you need to know about event linking.

Let’s say that before this button, we also have a serveName label. And more importantly, we have an input to which we can give a bootstrap form-control class. Here I want to allow the user to enter the name of the server that should be created. So here we can listen to the input event. This is a normal DOM event provided by the input element that is much more than what the user types. And here, we can run the serverName update because it will be triggered with every key entered.

So let’s add this method to our component. And now I kind of want to take out what the user has entered right now, what is the value of this field. Now we can do it by passing the dollar sign event here. And the dollar event sign, super important! This is a kind of reserved variable name that you can use in the template when you use the event link for that event.

So, only between these quotes here, the dollar sign event will simply be the data issued with that event. So input and click are default events provided by the DOM. And they send us data when they’re triggered. The click event gives us an object that, for example, contains the coordinates where we clicked. And the input event also gives us data, information about the event.

Now we can capture this data with the past dollar event as an argument to the method we call or use anywhere between these quotes in the code we execute. The dollar event sign is something to keep in mind. Reserve the word that gives us access to the event data.

So now we move on to updating the server name. So here we know that we will receive this event and it will be any type for the moment. Now, let’s just save it to the console so we can see it in this debugging console.

If we do this and I type something here, look at the console on the right. A few outputs have been written here. Four to be precise, because I typed four characters and made four keys. So the input event was triggered four times. And if we take a look at this event, we have some information here.

For example, target. And the target is simply the HTML element on which this event occurred. So here on the target, since it is an input element, if we scroll down, we also have the value test and this is what the user entered

Now that we have seen how to use the dollar sign event object to retrieve the event data, let’s move on to the bidirectional data link. For this, we will use the v-model directive, which allows us to link the value of a form field to a property of our component, but also to update this property when the value of the field is changed. We will therefore add another form field for the server password, use the v-model directive to link its value to a property of our component, and then display this property next to the server name. Then we will add a method to display an alert message when the user clicks on the "Create Server" button, then use the v-on directive to listen to the click button event and call our method. Finally, we will have a small full example application to show how to use the v-model and v-on directives for data binding and event listening.