X

Vitajte!

Nepremeškajte nové videá a zaujimavé novinky zo sveta Angularu 2+...

00:13 - 00:14Vitajte v novom videu
00:15 - 00:18v tejto časti si povieme o event bindingu
00:18 - 00:21použijeme jednoduché eventy ako click, double click
00:21 - 00:23či mouse enter
00:23 - 00:27čo je ale dôležité je, že si vytvoríme aj náš vlastný event
00:28 - 00:30ktorý vynesie dáta von z komponentu
00:30 - 00:33vždy keď niekto klikne na tlačidlo pre vymazanie užívateľa
00:34 - 00:36Poďme na to
00:36 - 00:38Čo je to event-binding?
00:39 - 00:41Vždy keď užívateľ používa Vašu aplikáciu
00:41 - 00:45je dôležité vedieť keď sa udejú veci ako click
00:45 - 00:46scroll
00:46 - 00:48či stlačenie konkrétnej klávesy
00:49 - 00:52Všetko toto sú udalosti ktoré môžete použiť
00:52 - 00:55pri zavolaní určitej logiky vo Vašich komponentoch
00:56 - 00:58Eventov je veľké množstvo
00:58 - 01:01dokonca ani toto nie sú všetky dostupné
01:01 - 01:05Event binding používa zápis s oblými zátvorkami
01:05 - 01:09kde v oblých zátvorkách je názov eventu
01:09 - 01:12a expression bude najčastejšie funkcia
01:13 - 01:16ktorá sa spustí keď sa udeje konkrétny event
01:18 - 01:21Najjednoduchší zápis môže vyzerať takto
01:24 - 01:26Všimli ste si premennú $event?
01:26 - 01:29Tento $event objekt je automaticky priradený
01:29 - 01:33k cieľovému eventu čo by v tomto prípade bola udalosť myši
01:33 - 01:35ktorej kurzor vstúpil do elementu
01:36 - 01:39Tento objekt vieme potom použiť pre získanie napríklad
01:39 - 01:41kordinátov X a Y či aké
01:41 - 01:45klávesy boli stlačené v momente keď sa táto udalosť vyvolala
01:46 - 01:48Poďme si to ukázať v praxi
01:49 - 01:53Budeme pokračovať v našom projekte z predchádzajúcej časti
01:57 - 02:00Otvoríme si userListComponent
02:00 - 02:02a vymažeme Väčšinu užívateľov
02:02 - 02:04Nebudeme ich toľko potrebovať
02:18 - 02:21Vytvoríme si button pre pridanie nového užívateľa
02:34 - 02:36Po kliknutí naň sa nič nedeje
02:37 - 02:39Takto si vytvoríme
02:39 - 02:42v userListComponente novú metódu addNewUser()
02:44 - 02:47Tá nám neskôr pridá ďalšie dáta do nášho
02:47 - 02:50userList JSONu, zatiaľ tam dáme len
02:50 - 02:52alert ktorý vypíše hlášku
02:57 - 02:59Teraz našu metódu addNewUser
03:00 - 03:03priradíme našemu buttonu, použiejeme na to zápis
03:03 - 03:04s oblými zátvorkami
03:04 - 03:09kde je medzi oblými zátvorkami názov eventu (u nás to bude click)
03:09 - 03:12a ako expression dáme názov našej funkcie
03:12 - 03:15teda addNewUser()
03:15 - 03:18a po kliknutí na button sa zobrazí alert()
03:23 - 03:26Teraz prepíšeme obsah našej funkcie addNewUser,
03:26 - 03:29pridáme ďalšie dáta do nášho userDatat JSONu
03:30 - 03:32Použijeme na to Javascriptový PUSH
04:10 - 04:13ID užívateľa budeme používať ako identifikátor
04:13 - 04:16pre vymazávanie preto
04:16 - 04:18pri pridávaní nového užívateľa nastavíme ID
04:18 - 04:21na maximálny počet užívateľov + 1
04:21 - 04:24tým dostaneme ďalšie ID
05:07 - 05:10V event bindingu môžete použiť akýkoľvek validný
05:10 - 05:12Javascriptový event preto náš click
05:12 - 05:15zameníme za mouseenter a nový užívateľ
05:15 - 05:19sa pridá vždy keď prejdete kurzorom myši do buttonu
05:40 - 05:44Tak isto môžete použiť event ako napríklad dblclick
06:05 - 06:07Teraz si vytvoríme vlastný event
06:07 - 06:11do userInfo komponentu pridáme delete button
06:38 - 06:41V userList komponente vytvoríme metódu
06:41 - 06:44deleteUser ktorá bude prijímať ako parameter userID
06:44 - 06:47zatiaľ tam dáme alert aby sme videli či
06:47 - 06:49náš click na delete button funguje
06:58 - 07:01Do nášho buttonu nabindujeme event click
07:01 - 07:04na metódu deleteUser a ako parameter
07:05 - 07:07použiejem user.id
07:12 - 07:15Teraz si vytvoríme vlastný event onUserDelete
07:15 - 07:18ktorý vždy keď kliknete na delete button
07:18 - 07:21v userInfo komponente vyvolá tento event
07:21 - 07:24a náš hlavný komponent userList bude vedieť, že má
07:24 - 07:26vymazať dáta z hlavného JSONu
07:26 - 07:29Použijeme na to @Output() dekorátor a EventEmmiter
07:30 - 07:31Zápis vyzerá nasledovne
07:32 - 07:33použijeme @Output() dekorátor
07:34 - 07:37Ten umožní to aby náš komponent mal výstup
07:37 - 07:39naším výstupom
07:39 - 07:41bude vlastný event ktorý sme nazvali
07:42 - 07:45onUserDelete, teda jeho typ bude EventEmmiter
07:45 - 07:48kde v lomených zátvorkách je number
07:48 - 07:51pretože tento event vráti ID užívateľa
07:51 - 07:52ktorého chceme zmazať
07:55 - 07:58A toto celé sa rovná new EventEmmiter()
08:02 - 08:05Teraz nášmu eventu onUserDelete
08:05 - 08:08nastavíme hodnotu, to spravíme pomocou zápisu
08:08 - 08:12this.onUserDelete.emit(userID)
08:16 - 08:20Teraz sme spravili to, že ktokoľvek klikne na delete button
08:20 - 08:23v našom userInfo komponente
08:23 - 08:26tak táto info sa dostane von z
08:26 - 08:29tohoto komponentu v podobe eventu onUserDelete
08:30 - 08:32ktorého hodnota bude userID
08:34 - 08:37Teraz si poďme vytvoriť hlavnú funkciu ktorá vymaže
08:37 - 08:39nášho užívateľa
08:39 - 08:42Tá bude súčas'tou hlavného komponentu
08:42 - 08:45userList, zatiaľ si tam pridáme len alert
08:45 - 08:48aby sme videli či náš event binding funguje
09:12 - 09:14Teraz nasleduje tá najdôležitejšia časť
09:14 - 09:16vložiť userInfo komponentu
09:17 - 09:19náš vlastný event onUserDelete
09:20 - 09:21a priradiť ho funkcii
09:22 - 09:24deleteUserFromJSON
09:24 - 09:27všimnite si, že funkcia deleteUserFromJSON
09:27 - 09:30má parameter $event , pod touto premennou
09:30 - 09:33je uložená naša emitovaná hodnota
09:33 - 09:36usera teda userID užívateľa
09:36 - 09:37ktorého ideme vymazať
09:37 - 09:41Teraz po kliknutí na delete button nášho komponentu sa hodnota
09:41 - 09:44užívateľa prenesie von z tohoto komponentu
09:44 - 09:47do eventu onUserDelete
09:47 - 09:50My si toto ID užívateľa už len preberieme
09:50 - 09:53do metódy deleteUserFromJSON
09:53 - 09:54a zmažeme ho
10:02 - 10:03Už chýba len jedna jediná vec
10:03 - 10:07Vymazať užívateľa z JSONu podľa userID
10:07 - 10:11Tým, že náš zoznam užívateľov je pole JSON objektov
10:11 - 10:14najprv musíme zistiť index podľa IDčka
10:14 - 10:17a potom pomocou funkcie splice
10:17 - 10:19takéhoto konkrétneho užívateľa vymažeme
10:57 - 11:00V tejto časti sme si ukázali základnú prácu s eventami
11:01 - 11:03vytvorili náš vlastný event
11:03 - 11:05a pomocou @Output() dekorátora
11:05 - 11:07ho priradili našemu komponentu
11:09 - 11:12Ďakujem za pozornosť a vidíme sa v ďalšom videu

Event BindingVytváranie udalostí cez @Output() dekorátor

V tejto časti si povieme o vytváraní eventov ako napríklad click ale tiež vytvorenie vlastného eventu pomocou @Output() dekorátora a EventEmmiteru

Čo je to Event Binding?

Angular Event Binding je spôsob akým váš template reaguje na DOM zmeny. Veľa DOM udalostí je vyvolaná užívateľom, naviazaním sa na tieto udalosti viete získať a reagovať na vstupy od užívateľa.

Zápis Event Bindingu vyzerá nasledujúco, v oblých zátvorkách je názov DOM eventu ktorý sa rovná výrazu alebo funkcii ktorá sa má vykonať. Napríklad klik na tlačidlo ktoré by zavolalo funckiu onClickMe() by vyzeral napríklad takto:

                                
<button (click)="onClickMe()">Click me!</button>
                                
                            

Vytvorenie vlastného eventu pomocou @Output()

Často sa stretnete s potrebou dostať určitú hodnotu z Vašeho komponentu vo vlastnom evente, napríklad ak v našom komponente klikneme na tlačidlo "Vymazať" tak náš komponent vráti nami určenú hodnotu (napríklad userID) vo vlastnom evente onUserDelete. Vyzeralo by to napíklad takto:

                                
//deklarácia premennej v komponente
@Output() onUserDelete: EventEmitter<number> = new EventEmitter();

//zavolanie eventu a nastavenie hodnoty v komponente
this.onUserDelete.emit(userID);

//takýto event potom bude dostupný v v evente onUserDelete
//kde v premennej $event bude hodnota userID
<user-list (onUserDelete)="doSomething($event)"></user-list>
                                
                            


Stiahnite si súbory tohoto kurzu
    
#potrebujete node.js a globálne nainštalovaný @angular/cli
git clone https://github.com/streamer/angular_sk_kurz.git
cd angular_sk_kurz/3/myapp
npm install
ng serve
    


Diskusia