Passing data from Directive to Component in Angular

Question

Here is the directive, which listens to key strokes on any component:

import { Directive, HostListener } from '@angular/core';

@Directive({ selector: '[keyCatcher]' })
export class keyCatcher {
    @HostListener('document:keydown', [ '$event' ])
    onKeydownHandler(event: KeyboardEvent) {
        alert(event.key);
    }
}

the KeyCatcher is used in the HTML portion of a custom component.

How can I pass the event.key to the component.ts using the KeyCatcher?

Is this usually done through a service?

How does the dependency structure look? Is the directive used in the component that needs to be notified? If so just use an event (@Output) — Igor
– Igor, Commented Aug 9, 2019 at 19:23

Lazy Coder · Accepted Answer · 2019-08-09 19:33:07Z

4

Try something like this https://stackblitz.com/edit/angular-8rqqrc

Using an @Output of EventEmitter in the directive allows you to bind a function to it from the parent to read the event stream.

answered Aug 9, 2019 at 19:33

Lazy Coder

1,2171 gold badge10 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Passing data from Directive to Component in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related