Use directive in host of another Directive

Question

I want to add a directive to an element from another directive by using the host property, but there doesn't seem to be a way to reference the other directive.

@Directive({
    selector: '[one]',
    host: { '[two]': '"some-value"' }
    // How can I reference DirectiveTwo here?
})
export class DirectiveOne { }

@Directive({
    selector: '[two]'
})
export class DirectiveTwo { }

When doing this, I get the standard "Can't bind to 'two' since it isn't a known native property" error.

What is the correct way of referencing and using one directive from another?

score 16 · Accepted Answer · answered May 11 '16 at 06:21

16

Directives are instantiated by Angular for selectors matching statically added HTML (element, id, attribute, class, ...) only.
There is no way to instantiate directives using the host parameter of the @Component() or @Directive() decorator. There is also no way to create directives dynamically using ViewContainerRef.createComponent() (former DynamicComponentLoader)

Getting a reference to another directive that was instantiated by Angular because of a statically added HTML on the same element is supported though.

answered May 11 '16 at 06:21

Günter Zöchbauer

623,577
216
2,003
1,567

5

If that is so, what is the best practice for having one Directive extend or use the functionality of others? This seems like a pretty significant limitation. – Yona Appletree May 11 '16 at 18:49
1

I think this is a topic for a bigger update https://github.com/angular/angular/issues/11606 – Günter Zöchbauer Oct 07 '16 at 11:47

score 0 · Answer 2 · answered Mar 22 '23 at 22:43

0

This can now be achieved with hostDirectives in Angular v15+

@Directive({
  selector: '...',
  hostDirectives: [Tooltip, Menu],
})
export class MenuWithTooltip { }

Details in the Angular docs

answered Mar 22 '23 at 22:43

Drenai

11,315
9
48
82

Use directive in host of another Directive

2 Answers2

Linked