Angular 8 - Tutorial | Event Binding #11

Опубликовано: 01 Февраль 2020
на канале: Technical Babaji (Tarique Akhtar)

1,373

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 |  Introduction to Ang...
Angular 8 2020 | Angular Project Setup #2
   • Angular 8 2020 | Angular Project Setu...
Angular 8 2020 | Workspace vs File Structure of Angular #3
   • Angular 8 2020 | Workspace vs File St...
Angular 8 2020 | Single Page Application vs Multi page Application #4
   • Angular 8 2020 | Single Page Applicat...
Angular 8 2020 | Complete architecture Overview #5
   • Angular 8 2020 | Complete architectur...
Angular 8 2020 | What is Component in Angular Application #6
   • Angular 8 2020 | What is Component in...
Angular 8 2020 | Interpolation #7
   • Angular 8 2020 | Interpolation #7
Angular 8 2020 | Property binding #8
   • Angular 8 2020 | Property binding #8
Angular 8 - tutorial | Class Binding #9
   • Angular 8 - tutorial | Class Binding #9

#angular #event_binding

Смотрите видео Angular 8 - Tutorial | Event Binding #11 онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Technical Babaji (Tarique Akhtar) 01 Февраль 2020, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 1,373 раз и оно понравилось 23 людям.