7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 67Length: 8.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

5.10 Working With the `@HostListener` Decorator

Let's wrap up this chapter with a look at the @HostListener directive. This allows us to add an event listener that targets something outside of the component itself—for example, the document.

1.Introduction
6 lessons, 42:00

1.1
Introduction
00:48

1.2
Get Started With Angular-CLI
11:09

1.3
Developing With Angular-CLI
13:17

1.4
TypeScript vs. JavaScript
06:54

1.5
Angular Modules From the CLI
04:31

1.6
CLI Options
05:21

2.Get Started With Angular
7 lessons, 42:38

2.1
Bootstrapping the Application
04:30

2.2
The Application Module
04:15

2.3
The Application Component
08:06

2.4
Component Styling
03:06

2.5
Global Styling
05:11

2.6
Creating a Component With the CLI
09:34

2.7
Creating a Service With the CLI
07:56

3.Core Concepts
7 lessons, 55:20

3.1
Component Trees
06:20

3.2
Dependency Injection
06:52

3.3
Content Projection
05:38

3.4
Component and Directive Lifecycle Methods
06:31

3.5
Component-Only Lifecycle Methods
05:28

3.6
Decorators
07:36

3.7
Models
16:55

4.Template Deep Dive
11 lessons, 1:10:56

4.1
Basic Data Binding With Interpolation
05:35

4.2
Property Bindings
07:07

4.3
Attribute Bindings
03:29

4.4
Event Bindings
08:16

4.5
Class and Style Bindings
05:44

4.6
The `NgClass` and `NgStyle` Directives
05:04

4.7
The `*ngIf` Directive
04:41

4.8
The `*ngFor` Directive
09:29

4.9
Inputs
05:33

4.10
Using Pipes in a Template
07:31

4.11
Using Pipes in a Class
08:27

5.Forms
10 lessons, 1:45:41

5.1
Handling User Input With Template Reference Variables
07:06

5.2
Template-Driven Forms
11:10

5.3
Template-Driven Forms: Validation and Submission
14:00

5.4
Reactive Forms
11:26

5.5
Using a `FormBuilder`
08:01

5.6
Reactive Validation With Built-in Validators
14:53

5.7
Creating Custom Validators for Template-Driven Forms
12:18

5.8
Creating Custom Validators for Reactive Forms
08:26

5.9
Observing Form State Changes
12:40

5.10
Working With the `@HostListener` Decorator
05:41

6.Routing
9 lessons, 1:15:10

6.1
Defining and Configuring Routes
07:53

6.2
Rendering Components With Router Outlets
10:14

6.3
Using Router Links for Navigation
05:25

6.4
Navigating Routes Using the Router
06:24

6.5
Determining the Active Route Using an Activated Route
07:16

6.6
Working With Route Parameters
10:42

6.7
Using Route Guards
07:36

6.8
Observing Router Events
10:55

6.9
Adding Child Routes
08:45

7.Using the HTTP Client
5 lessons, 56:24

7.1
Sending an HTTP Request
10:52

7.2
Handling an HTTP Response
11:22

7.3
Setting Request Headers
12:33

7.4
Intercepting Requests
09:04

7.5
Finishing the Example Application
12:33

8.Testing
10 lessons, 1:23:27

8.1
Service Unit Test Preparation
10:45

8.2
Unit Testing Services
13:24

8.3
Component Unit Test Preparation
12:35

8.4
Unit Testing Components
07:27

8.5
Unit Testing Component Templates
06:58

8.6
Unit Testing Pipes
04:41

8.7
Unit Testing Directives
04:56

8.8
Unit Testing Validators
04:48

8.9
Unit Testing Observables
11:37

8.10
Unit Testing HTTP Interceptors
06:16

9.Building for Production
1 lesson, 03:40

9.1
Building for Production
03:40

10.Conclusion
1 lesson, 01:32

10.1
Conclusion
01:32


5.10 Working With the `@HostListener` Decorator

Hi folks, in this lesson, we're going to take a look at the HostListener decorator. We can easily add listeners for events that might occur inside components using the event binding. But there may also be times when we want to subscribe to events that might occur outside of our components. We can use the HostListener decorator to do this, and that's what we're going to do in this lesson. Throughout this section of the course, we've been focused on building a feedback form. The form doesn't actually hook up to anything, and it won't send any feedback anywhere. But it has been a very useful aid in learning how to work with reactive forms. It has one more trick to show us before we move on, but this isn't specific to forms. It just happens to be really applicable to this kind of pop up element that we've used to display the feedback form. So at the moment, we've got this feedback link in the header, and when we click on this, the feedback form opens. And inside the form, we've got this cancel link that can be used to close the feedback form. We've also got the Send button there, it just isn't wired up, but if it was wired up, that, too, would probably close the form. Maybe after displaying some kind of success message or something. Now that's all very well and good, but people want more than that. Users should be able to close the feedback form by pressing the Esc key or by clicking somewhere outside of the feedback form. They shouldn't be forced to click some cancel link to get rid of it. Typically, if we want to allow the pop up to be closed using the Esc key in a non-angular app, we'd probably add an event listener to the document. And if the pop-up was open and the key that was pressed was the Esc key, then we'd shut the pop-up or mode, or whatever it was. We can do that here as well, it would be easy enough. But Angular does give us a cleaner way to add this kind of event handler, that's the HostListener decorator. With the HostListener decorator, we can add a document level handler for key-up events which will only be active while the feedback form is open. So, first of all then, let's import the HostListener decorator. We can get rid of OnDestroy because we aren't using an NG OnDestroy method, and let's replace it with HostListener. So now we can add a listener for key up events at the document level. The HostListener decorator takes two arguments. The first is the event that we want to bind to, which in this case is the key up event, which is scoped to the document. The second argument is an array, which is used to pass the event object through to the handle function. The handler function is then supplied after the decorator. In this case, we named the function onkeyup, but in truth, we can call the function whatever we want. The function receives the event object as an argument, because we specified in the decorator, and this will of the type KeyboardEvent. The function doesn't need to return anything, so we can set the return type to void, and let's just log the event out to start with. And now let's go back to the browser. So we should find that before the feedback form is open, we can type on the keyboard, and we don't see any console logs. But now let's open the feedback form, and let's start typing again, and this time, we start to see the keyboard events appear. So let's close the feedback form once again, and now we don't see any more keyboard events. So the HostListener is only active while the component that adds the HostListener is actually open, awesome. So, let's use the handler to actually close the feedback form, instead of just logging the event to the console. We can just check whether the key property of the events is equal to the string escape. And if it is, then we can invoke the hideFeedbackForm method of the component, and that should result in the feedback form closing. Let's just go back to the browser and test that that actually works. So we open up the form and now I'm going to press the Esc key on my keyboard and the feedback form is closed, excellent. So in this lesson, we saw how we can bind to events issued from our components at the document level using the HostListener decorator. We saw that we passed the name of the event we would like to bind to, optionally with a qualifying name space. And we saw that we can pass the event object into the handler using the second argument of the decorator. We learned that we can then provide the handler function, and that will be invoked every time the event occurs. Thanks for watching.

Back to the top