Angular 8 - Tutorial | Event Binding #11

In this video we will understand event binding in angular with example
Till now what we have discussed in previous videos
- interpolation
- property binding
- class binding
- style binding
this binding flows the data in one direction that is from
comonent class to an html property

when we have a web form we will have a variety of controles on that
web form for example we have textbox, button, drop down list, images
Etcetera
when user visits a web form he will perform variety of action
he can click a button select from a drop down list
insert into a textbox, hovoring over images, submit a form

when user perform these actions their corresponding events raised
and when these events raised we need to capture this events and notify
to component so that we can react to those event

so in simple we can say event binding flow the data in opposite
direction form html element to a component
-------------------------------------------

sometimes we might want the information about event itself.
for example you need the information about the click event

$event is a special variable in angular it gives all
the information about the DOM event that was raised
now we are passing the parameter to handlerFunction() method
so lets define inside .ts file to receive event information

so by using the $event you can get access to all the property
of DOM event
----------------------------
sometimes you work with event binding a separate event handler
may not be necessary.
Type the code to be executed right inside the html template
-----------------------------------

// Full list of Angular Events

(click)="myFunction()"
(dblclick)="myFunction()"
(submit)="myFunction()"
(blur)="myFunction()"
(focus)="myFunction()"
(scroll)="myFunction()"
(cut)="myFunction()"
(copy)="myFunction()"
(paste)="myFunction()"
(keyup)="myFunction()"
(keypress)="myFunction()"
(keydown)="myFunction()"
(mouseup)="myFunction()"
(mousedown)="myFunction()"
(mouseenter)="myFunction()"
(drag)="myFunction()"
(drop)="myFunction()"
(dragover)="myFunction()"

-----------------------------------------

Angular 8 2020 | Introduction to Angular
Angular 8 2020 | Angular Project Setup #2
Angular 8 2020 | Workspace vs File Structure of Angular #3
Angular 8 2020 | Single Page Application vs Multi page Application #4
Angular 8 2020 | Complete architecture Overview #5
Angular 8 2020 | What is Component in Angular Application #6
Angular 8 2020 | Interpolation #7
Angular 8 2020 | Property binding #8
Angular 8 - tutorial | Class Binding #9

#angular #event_binding

[jayakumar]

Good post. Share More videos. Can you share source code also