Write an Angular Directive

Add Inputs to Angular Directives

Handle Events with Angular Directives

Build a Directive that Tracks User Events in a Service in Angular

Combine HostBinding with Services in Angular Directives

Use Template Elements in Angular

Create Elements from Template Elements with ngTemplateOutlet in Angular

Write a Structural Directive in Angular

Implement Structural Directive Data Binding with Context in Angular

Assign a Structual Directive a Dynamic Context in Angular

Create a Template Storage Service in Angular

Understand Angular Directives in Depth

A `@Directive` can also listen to events on their host element using `@HostListener`. This allows you to add behaviors that react to user input and update or modify properties on the element without having to create a custom component.

https://app.egghead.io/api/v1/lessons/angular-handle-events-with-angular-directives/subtitles

[00:00] You can listen to events on the element by adding HostListeners, then typing in the name of the event as a string, so click. This is just decorating a function. Let's all say onClick, so whenever we click, let's just console.log click.

[00:16] From here, anytime I click on one of these elements, click, click, click. You'll see that click was logged out each time. Again, that's because this first selector is on each of these elements, first, first, first and its host listener is saying, "Hey. Listen for clicks on these elements."

[00:33] Now if you'd like to get access to the actual event, after the event name, you say comma and then an array of strings. $event is what we want then the event comes in here. Let's going to move this down to the next line for formatting sake.

[00:48] From here I can log out the event, it save here. Now when I want to click on each of this, I'll get the MouseEvent. Click, click, click in all the MouseEvents. Often you'll combine these HostListeners with HostBindings.

[01:01] For example, if in here I set this.first to clicked and I hit save, because inner text is bound to this first, when I click on this, this.first changes to clicked. Now the inner text is clicked. I'll click on this one, that turns into clicked and that turns into clicked.

[01:21] That's because first is here. The starting value is whatever we pass in to the attribute or the attribute directive and it's bound to that now so that whenever we change that, when that updates, whatever we're bound to will change as well.

Handle Events with Angular Directives

Share this video with your friends

Course

Understand Angular Directives in Depth