Angular 10 Tutorial #28 - Event Binding in Angular | Angular 10 Tutorial For Beginners

hi friends welcome back to arc tutorials this is angular 10 full tutorial series for absolute beginners in today's episode we are going to learn about the last of the kind of one-way data binding which is event binding in the previous episodes we have learnt about different types of one-way data binding like interpolation property binding attribute binding and today we will focus on learning about event binding truth be told you can never build a real functional angular application without even binding right you'll need some kind of interaction which which has to happen via events right today you will learn all about even binding in this episode let's get started this is part 28 of the angular 10 complete tutorial playlist i am planning around 100 tutorials for you including the live project so make sure that you subscribe to the channel the notes and code is available in the github link that i have published below in the description box make sure you check it out also these are the following topics that i have covered so far as part of our the series make sure that you check out all these topics and episodes because it has a lot of detailed explanation code and notes uh which will help you really learn and master angular all right so these are all the topics that i've covered uh if you have any doubts in any of these topics please do let me know in the comments section i'll try and help you today we are focusing on learning about event binding all right so what is even binding even binding is a technique that allows the user to bind events of elements from view to component right so this is from view to component so remember the previous one-way data binding like property attribute all of that we have seen that they they are from component to view right today we are talking about from view to component and what are these events they are nothing but these are just javascript events for example click on mouse over on hover right on click on mouse move anything right anything that you do on javascript those are an event now this is one way like remember that it goes from view to component right and it can be used for all and any events i'll show you few examples today the syntax for writing is little different so here you have the bracket you write the event name equal to function but there is a difference that you don't write unlike in javascript you will write on click on mouse over here you will remove the word on right it will automatically know that that's the event you are talking about all right so that being said um let's get started with some notes and hands-on example that will help you prepare and master angular event binding let's get started all right cool so what we are going to do let's make some notes first on episode number 28 event binding so event binding event binding is one way one way data binding from view slash template to component slash class right class or method class or just call it component right and that's the technical term for it so from view to component right now you can call any event right we can call any any event now what is an event in event is nothing but event is nothing but javascript events like click on click on mouse over etc etc on focus on blur so goes on right you know the javascript event so now how do we call it right so remember the syntax for writing is we will write the element whatever element you want to use and you will only write the name remember i am not writing on click i am just writing click if it is focus you'll write on focus if it is blur you'll write blur not on click this is not correct you just have to right click okay equal to method name that's it that's the that's the way you write um the method or like the event binding that you do now remember a common mistake that a lot of people do is they don't get they don't call this correctly or they won't write this syntax correctly so make sure that you don't make that mistake right so get the syntax correct because that's the search starting point now you can apply events to any element right apply events to any element right all right so that being said let's get started let's start this application and then i'll show you some examples i'll give you some homework as well make sure your practice along with me because that's the only way to learn it all right and of course i'm here if you need any help if you need any guidance or you're running into any issues let me know i'll be more than happy to help you while it's building hit the like button hit the subscribe button all right so let's get started so let's throw in a simple button like i just showed you we'll start with simple equal to here you will define the method name right now what's the method name here so this is the method name that you will define in your component class let's do that so here i'm going to say say hello right nothing crazy nothing fancy right just a simple method now we need to implement this in our app component or whichever component file you want to do right so let's go ahead and let's define it right here and we will say say hello right and we'll say console.log now he'll say hello from arc tutorials absolutely basic absolutely simple absolutely i would say arguably the most simplest method you will write right so we it's nothing but if you see it's a function right event is nothing but a function you are calling a function so this is a function which is written in this bracket and then curly brace open curly blaze closed and then inside that you will write the logic that you have so here you have the method and here we are calling the same method right now remember the way it is just like functions right so if you know if you are coming from a programming background right if you are coming from programming background like java.net or anything relate this to functions right how do you write a function you write the function with function keyword like this like this the only difference in typescript is you don't have to write the function keyword right that's it that's how you write methods right so here i've written say hello and i'm calling it on the button click now again i'm not writing on click i'm just writing click and inside the bracket right that's it so now let's go ahead and see the output and execute this code all right so here i have let's refresh so we see a button it doesn't have any name let's put a name and say click to say hello right so click to say hello and let's go here to inspect and in the console clear this and now i'm going to click on the button i clicked on it now go to your console and you see hello from arc tutorials right that means when i click it's calling a method right that is your event binding right what it means is that you have just binded an event ah which is nothing but on click to a method which is say hello right so here the event is click and the method is say hello let's do one more now let's do i want to do a div right now we are saying div mouse over equal to highlight light bg color right highlight me please right so what we are doing we have a div which we are saying that on mouseover just highlight it okay and how do you do that copy this again go to your component class and here let's do another and say console.log hi i am being i like it right you will think these are simple implementation yes they are right for now they are because i want to keep it intentionally simple for you because there is a lot of work we have to do in terms of the complex logic that will write but these are the baby steps that you have to take in order to learn or master or write any angular application right all right so take the mouse over now you will see i am being highlighted right so that's as simple as that now just to show you one more little example i'll do one more example which is say a link right why not try with the link so again so what we'll do now or we can do one thing you can say input type equal to text and here we'll say focus when on focus equal to say again will pass some value or we'll just say input input box again this is just for your reference there is nothing fancy going on here yet again this is just a method which we will call like this console.log and we will say this is input box right so right so this is just a input box on focus we are just putting that right but you can also parameterize it right so this is a method right so if you see these are methods like say hello highlight background color so let's say you pass you want to pass some value right you can do that as well so here you are passing three parameters have the same definition here right so you can say a comma b comma c and you can highlight them here and say a plus b plus c so you can have something like a plus b plus c right so this is how you can pass parameters to the methods right so you have the events and you have the methods and you can pass some parameters to the methods right let me show you this in action because this knowledge is absolutely necessary and critical because this is programming fundamental actually what i am teaching you now um so i take the mouse over and what is the event it's highlight bg one two three and here it is highlight background color on mouse over okay so let's take the mouse over on it and you'll see i'm being highlighted one three and four right so there are three values that have come up right so that's how you pass the uh parameters to the methods right all right um i think that's all you should know about event binding as of today uh that's because um we have a lot of work we will do with events in the coming episodes practice this make sure that you get the fundamentals and basics correct because once you have your basics correct uh rest everything will flow will be a smooth flow all right so what's your homework today then uh practice uh calling events on various uh elements right uh try different different events than what i have used then what i have used and then also try creating few methods right which will take single parameter which will take multiple parameter right because this if you know this knowledge you will be able to understand any code that we are going to write further right so absolutely important make sure that you get it right okay let me know if you have any doubts i'm here to help you all right so in the next episode we will start learning about two-way data binding absolutely important critical especially when you're working with forms right you don't want to miss on that so make sure that you like the video share comment and subscribe to my channel also if you like my work and tutorials if you find them useful please buy me a coffee at buy me a coffee.com arc tutorials thank you so much see you in the next episode

Channel: ARC Tutorials

Views: 5,597

Keywords: Angular 10 tutorial for beginners, angular 10 crash course, angular 10 tutorial for beginners step by step, angular 10 tutorials for beginners 2020, angular tutorial 2020, angular 10 full course, angular full example, angular 10 for experienced, angular 10 full tutorial series, angular 10 crud tutorials, angular 10 tutorial for beginners, angular complete tutorial series, angular 10 beginners tutorials, angular 2021 full course, Angular event binding tutorial, event binding tuts

Id: ZXG7kLieiC8

Length: 13min 55sec (835 seconds)

Published: Thu Nov 19 2020