Limit directive to specific host (component) in Angular

Question

Is is possible to limit which component can have custom directive?

For example:

@Directive({ 
    selector: '[myHighlight]', 
    host: "my-component" //!!!!!!!!!
})
export class HighlightDirective {
    constructor(el: ElementRef) {  //el is my-component - can not be nothing else !!!!
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

@Component({selector: "my-component"})...

Use case:
I would like to write directive for specific third-party component. I will use that third-party component properties, so directive on another component wouldn't make any sense and would throw errors.

That means that myHighlight on div would be ignored.

Answer 1

I know this question is a couple months old, but you can do this in the selector. The selector property is just a css selector, so you should be able to do something like:

@Directive({ 
    selector: 'my-component[myHighlight]'
})

And that would match only my-component tags with myHighlight attribute. If you tried to apply the myHighlight attribute to, lets say, a div tag, you'd end up getting an error in the console like:

Can't bind to 'myHighlight' since it isn't a known property of 'div'