Limit directive to specific host (component) in Angular

user_3170087 0
Viewed 2391

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.

angular2-directives angular
2 Answers

You don't need use host. In host, you can write what events you want to listen and some other properties like attribute binding. About this, you can read there Angular Directives

In your case, you can check where you bind your directive like in this example:

@Directive({ 
    selector: '[myHighlight]', 
})
export class HighlightDirective {
    constructor(el: ElementRef) { 
       if (el.nativeElement.tagName === "MY-COMPONENT"){
           el.nativeElement.style.backgroundColor = 'yellow';
       } 
    }
}
user_64748110
Related