Extending Angular component with directive

Question

I wrote a directive which is adding a HostListener (in this case "focus") on any component. The directive should call a method on it's host component whenever the element is on focus.

<my-component myDirective>
    <h3>Hello World</h3>
</my-component>

<my-other-component myDirective>
    <button>Hello</button>
</my-other-component>

The HostListener inside myDirective

@HostListener('focus')
onFocus() {
    this.myService.myStream$
        .pipe(first())
        .subscribe((value => {
            this.myHostComponent.doSomeMagic(value);
        }))
}

Since it should work on every component i prefer to only implement the doSomeMagic() method in the components and letting the myDirective doing the work with the HostListener and the observable.

Is there a way to call a method on the directives host without knowing which component it actualy is?

I'm voting to close this question as off-topic because it is already answered on github — user4676340
– user4676340, Commented Jan 30, 2019 at 8:36
why not, in your directive, call a function in your service that emit a value? then, subscribe to the service in your component (I hope this has any sense) — Eliseo
– Eliseo, Commented Jan 30, 2019 at 9:18

Neter · Accepted Answer · 2019-01-30 08:39:49Z

1

I would do it with @Output and emit something like this:

@Directive({ selector: '[myFocusDirective]' })
export class FocusDirective {
@Output() myFocusDirective = new EventEmitter<MouseEvent>(); 

constructor(private elementRef: ElementRef) {}

@HostListener('focus')
onFocus() {
    this.myService.myStream$
        .pipe(first())
        .subscribe((value => {
            this.myFocusDirective.emit(value);;
        }))
}

and then to component

<input (myFocusDirective)="openDropdown()" type="text" />

answered Jan 30, 2019 at 8:39

Neter

1181 gold badge2 silver badges9 bronze badges

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

Comments

Roberto Zvjerković · Accepted Answer · 2019-01-30 08:45:37Z

0

You can do it with an injected component:

Something like this should work, directive.ts:

constructor(private myHostComponent: MyComponent) {}

...

this.myHostComponent.doSomeMagic(value);

You will have to know the type of component tho.

I believe it could work if you would make and abstract component from which all your doSomeMagic() components will extend:

constructor(private myHostComponent: MyAbstractComponent) {}

class MyAbstractComponent() { abstract doSomeMagic(); }

I'm not sure about the abstract part, you will need to check if it works.

Edit:

You can also pass the reference to the component/element via directive input. Here is a quick StackBlitz:

https://stackblitz.com/edit/angular-playground-anhhhc?file=app/directive.ts

edited Jan 30, 2019 at 8:45

answered Jan 30, 2019 at 8:29

Roberto Zvjerković

10.2k4 gold badges31 silver badges49 bronze badges

Collectives™ on Stack Overflow

Extending Angular component with directive

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related