Angular - dekorator HostListener czyli podpinanie się pod zdarzenia komponentu

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 2097 razy

Dekorator HostListener umożliwia podpięcie pod zdarzenie związane z komponentem własnej funkcji, która przy każdorazowym wywołaniu tegoż zdarzenia zostanie uruchomiona. Oto prosty przykład wykorzystania tego dekoratora do podpięcia się pod zdarzenie click:

countClick: number = 0; @HostListener('click') onClick() { this.countClick ++; }

Powyższy fragment kodu wystarczy umieścić w swoim komponencie, a dla efektu w HTML-u zamieścić:

<p>Liczba kliknięć na komponencie: {{ countClick }}</p>

Po zapisaniu każde kliknięcie w komponencie spowoduje uruchomienie metody onClick i zwiększenie licznika countClick o jeden.

Możliwe jest również przekazanie dowolnej liczby argumentów. Oto przykład:

countClick: number = 0; @HostListener('click', ['$event.target']) onClick(target) { this.countClick ++; console.log('target: ' + target + ' countClick = ' + this.countClick); }
Propozycje książek
tytuł: Angular. Profesjonalne techniki programowania. Wydanie IV autor: Adam Freeman

Tytuł:

Angular. Profesjonalne techniki programowania. Wydanie IV

Autor:

Adam Freeman

tytuł: Angular. Programowanie z użyciem języka TypeScript. Wydanie II autor: Yakov Fain, Anton Moiseev

Tytuł:

Angular. Programowanie z użyciem języka TypeScript. Wydanie II

Autor:

Yakov Fain, Anton Moiseev

tytuł: ASP.NET Core, Angular i Bootstrap. Kompletny przybornik front-end developera autor: Simone Chiaretta

Tytuł:

ASP.NET Core, Angular i Bootstrap. Kompletny przybornik front-end developera

Autor:

Simone Chiaretta

tytuł: Angular instalacja i działanie. Nauka krok po kroku autor: Shyam Seshadri

Tytuł:

Angular instalacja i działanie. Nauka krok po kroku

Autor:

Shyam Seshadri

tytuł: Angular w akcji autor: Jeremy Wilken

Tytuł:

Angular w akcji

Autor:

Jeremy Wilken

tytuł: ASP.NET Core 2 i Angular 5. Przewodnik dla Full-Stack Web Developera autor: Valerio De Sanctis

Tytuł:

ASP.NET Core 2 i Angular 5. Przewodnik dla Full-Stack Web Developera

Autor:

Valerio De Sanctis

tytuł: Angular. Profesjonalne techniki programowania. Wydanie II autor: Adam Freeman

Tytuł:

Angular. Profesjonalne techniki programowania. Wydanie II

Autor:

Adam Freeman

tytuł: Angular 2. Programowanie z użyciem języka TypeScript autor: Yakov Fain, Anton Moiseev

Tytuł:

Angular 2. Programowanie z użyciem języka TypeScript

Autor:

Yakov Fain, Anton Moiseev

tytuł: Angular 2. Tworzenie interaktywnych aplikacji internetowych autor: Gion Kunz

Tytuł:

Angular 2. Tworzenie interaktywnych aplikacji internetowych

Autor:

Gion Kunz

W związku z tym, że firma Helion nie wywiązuje się z swoich zobowiązań naliczania prowizji za każdą zakupioną książkę a kontakt z ową frmą jest nie możliwy autor strony zmuszony został do zablokowania linkowania książek. Za wszelkie niedogodności z tym związane z góry przepraszam i obiecuję włączenie linkowania gdy tylko sprawa zostanie wyjaśniona