10. Data Binding - Event Binding

4 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
This is a free item
$0.00
د.إ0.00
Kz0.00
ARS$0.00
A$0.00
৳0.00
Лв0.00
Bs0.00
B$0.00
P0.00
CA$0.00
CHF 0.00
CLP$0.00
CN¥0.00
COP$0.00
₡0.00
Kč0.00
DKK kr0.00
RD$0.00
DA0.00
E£0.00
ብር0.00
€0.00
FJ$0.00
£0.00
Q0.00
GY$0.00
HK$0.00
L0.00
Ft0.00
₪0.00
₹0.00
ISK kr0.00
¥0.00
KSh0.00
₩0.00
DH0.00
L0.00
ден0.00
MOP$0.00
MX$0.00
RM0.00
N$0.00
₦0.00
C$0.00
NOK kr0.00
रु0.00
NZ$0.00
S/0.00
K0.00
₱0.00
₨0.00
zł0.00
₲0.00
L0.00
QR0.00
SAR0.00
SEK kr0.00
S$0.00
฿0.00
₺0.00
$U0.00
R0.00
ZK0.00
Already have an account? Log In

Transcript

Let us learn about even binding. Even binding occurs when a user interacts with application like clicking a button moving the mouse hovering your mouse on an image. So, all these are events, when they even happens in an application, even binding occurs in case of even binding the data is carried from the view to the source that is from the HTML page to the component class. Now, let me explain this with an example. Have a look over here I have got a button to the button I am using click attribute it is surrounded by round brackets and I am trying to call a method chaining message. So, this is nothing but a function which is available in the component class.

What actually I am trying to do this I'm just passing on the data from the view to the conference. Now that is to the source. So, this welcome home is some message which is carried from the view to the component class, I am retrieving it in the component class and based on my requirement and changing the value. So, here I am trying to change the message can have a look I got a message. So, initially the message will be Have a good day then it will be changed to welcome home. Now, let us try this out let me go back to Visual Studio code.

Here, let me create a button we are using even binding so it is round bracket click a call to change message or we can have it as Greek message. Let me have a message of Welcome back. Great message. So, this is my button. And now I need to retrieve the message also. Already we have a message over here.

Can you see it In the component class initially, it says we created a message with Have a great day. So this message should be changed to welcome back. That's it. So, now, in the HTML page my work has done I have created a button which is trying to call a function greet message. So, let me create this function or this method in the component class. So in the component class, let me create it wait message equal to function.

This takes a value, but here, this dot message equal to value. I hope it is clear, I have got a message. I'm trying to change the message in this great message function. So let me into the semicolon. Let me save it and in my HTML, all set and saving it, let me open it in the browser. Now I have got this great message which is a button which is shown in the slide.

In the end, and let me click it. I'm clicking this brief message with a check whether it has changed. Yeah, we'll come back, I will refresh it again and I will show it to you here I have got it. So, have a great day on click of this button, the message should change to welcome back it is getting changed. So, this is about even binding in case of even binding you are taking the data from the view to the source. In my case, what I have done is I am taking the data that I am passing the data directly, you can also have input box you can retrieve the value from the input text fields, pass it over here and then modify the message that also is possible.

So, this is about even binding, all these commander data binding that is passing the data from the source to view our view to source till now what we have seen our one way data binding that is interpolation property by binding class binding style style binding all these carry the data from the component to the view. And in case of even binding the data is carried from the view to the status to the component class. In the next session, let us learn about two way data binding. Thank you

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.