Hello again, everyone.
So we've reviewed string, interpellation and property binding, and these two communication methods
are interacting from typescript to template.
However, as I'm sure you remember me mentioning before, sometimes this interaction can be from user
to class.
So here is where event binding comes in.
Nonetheless, the lesson we created a button and we made it or falls with property binding.
So in this lesson, I want to show you the interaction from template to class by clicking this button.
So we were going to talk about event binding.
So let's say that I want to edit a little bit of what we did last lesson comment here for now.
And again, I want to continue with this button, so I'll show you a small example to understand.
Event binding a little deeper than will continue with some arrangements to our project.
So now when I press this button, I want to print hello on the console first.
OK, so for this, I am creating a string variable.
I'm using it in the method that I'm going to create here.
Cool, so now that that set up, it's time to learn how to use event binding so now will write the name
of the event in parentheses where we define the button in the e-mail file.
So I'm typing click here, then I'll put it cool.
And between quotation marks, we call the method.
So here we have made use of event binding.
In fact, when you look at it this way, it looks like using property binding, doesn't it?
So we use square brackets for property binding and parenthesis for event binding.
OK, so now it's time to examine in the browser what we've just done.
So I'll open up a console and I haven't pressed the button yet.
So I don't see the word hello, right?
Now I press a button and a council now says hello and yeah.
As you can see here, we communicated by pressing a button on the template.
Cool, cool.
So that is a pretty strong example.
Of that communication, so now we've assumed that we created this button to add a product, right.
So I want to edit the method and the article here accordingly.
And then I will use this article with string interpellation for status tracking.
Look at this.
When I look in the browser, I don't see the string interpolation that I just created.
But now I can see, as you see, you and I press the button because we have interacted with this button
just by pressing.
OK, so now there's something else that we need to know about this event, binding business.
So to illustrate, I'll create an input field in the HTML file, and here we will allow the user to
enter the product name and we'll trigger the update method and we will create by listening to the input
event.
So now let's do these things in practice and make it clear.
So first of all, create a label here and then add input field, which type is text and also add a form
and control as class.
So now let's look at what will be the response.
And the value is added in this input field, that is when the event occurs.
So I'll open parenthesis for this and I'll write input and then the method we will prepare in the typescript
file and the parameter that it's going to take.
Of course, these are between quotation marks.
Now, here will define the parameter with dollar sign and event.
So here dollar sign event is important that it conveys information about the event and we can use it
in the template when using event binding.
So this information can include data values such as an event object string or no named, you know,
dollar sign event.
So dollar sign event will simply be the data emitted with that event.
So input and click are default events provided by the DOM that you can say and send some data when trigger.
And the click event gives us an object holding, for example, the coordinates that we collect and the
input event also gives us some data.
Some information about the event.
We can now capture this data with an event which is passed as a parameter to the method.
All right, yeah, that makes sense.
All right, so now it's time to prepare our method in typescript.
Well, right, our method, and it'll take a variable of type as any parameter.
And we'll print this on the console to keep track of what it is that we're doing.
So to keep track of our transactions, examining the console will be, well, that's what it's there
for, right?
So it's convenient for us.
Now we can see what we do in the browser.
So sure enough, there have been changes and I wrote something in his input, and when I look at the
console, I'll expect to see this value.
It's now open up the console and I'll see a long string of information, actually, there are as many
triggers here as the letter we wrote.
So I'm going to scroll down a bit.
And here I'll look at the target.
And here I see the value, the text.
And sure enough, we enter text in an input field and we provided a new trigger every time we hit a
letter.
So now I want to sign this text in a variable and see it on the template.
So for this, I'll define a string variable in the file.
And I want to use this variable in this method and its methods parameter is event.
Now, we should pay attention to writing while using this parameter, our variable is event dot, target
dot value and this variable is HTML input element.
And don't forget to put it in parenthesis.
So when using it here, we'll first declare element and then.
We want to equalize the value.
So we should pay attention to this.
And now we can see this variable with string interpellation on the template.
All right, so you followed all that.
Now, let's have a look and see what it looks like on the browser, yeah.
OK, so I entered the value in the input field.
I can see that right away.
And we see the change in the template with the triggering of an input element.
All right, so I think that's enough for this particular lesson and it completes the examination of
one way data mining methods, we learn what happens and how to use these methods.
So we're going to talk about two way binding in the next lesson.
So I hope to see then.
Until the next lesson, goodbye for now.