angular directive multiple selectors and @HostListener, @HostBinding

Question

This article describes how to implement multiple selector in a same single directive:

https://www.bennadel.com/blog/3367-matching-multiple-selectors-on-the-same-element-creates-a-single-directive-instance-in-angular-5-0-0.htm

@Directive({
    selector: "[everySecond] , [everyTwoSeconds]",
    outputs: [
        "everySecond",
        "everyTwoSeconds"
    ]
})
export class PingDirective implements OnInit, OnDestroy {
   @HostListener('mouseleave') mouseleave(e:Event){}
   @HostBinding('background-color') backgroundColor: string;
}

but when I denfine @HostListener or @HostBinding ,both are for same directive PingDirective.

Can you define it separately? To the following structure, you can listen to different span events and define css, everySecond or everyTwoSeconds.

<span everySecond> 
 everySecond 
 <span everyTwoSeconds>
 everyTwoSeconds
 </span>
</span>

Christian Vincenzo Traina · Answer 1 · 2018-10-24T09:07:40.090

2

Yes, you can. Just define a @Input property for every selector of your directive:

export class PingDirective {
   @Input() everySecond: boolean;
   @Input() everyTwoSeconds: boolean;

   ngOnInit() {
     if (this.everySecond) console.log('every second!');
   }
}

This works because Angular allows you to define Input properties for your directives. The name of input property can also be the same of your selector (in this way you can pass data to your directive, for example [timeout]="1" for a directive with selector: '[timeout]').

With the above code, you are saying to Angular that you expect two Input s for your directive, they can be both present (and both variable would be true), can be only one present, but at least one should be present, otherwise the @Directive selector won't match it

edited Oct 24 '18 at 09:07

answered Oct 24 '18 at 08:58

Christian Vincenzo Traina

9,546
2
40
63

Can you give me more details? – Finn Oct 24 '18 at 09:02
Obviously you'll be able to define your events with `if (this.everySecond)` and `if (this.everyTwoSeconds)` – Christian Vincenzo Traina Oct 24 '18 at 09:11
what is about the `boolean` var form `@Input() everySecond` and `@Input() everyTwoSecond`? How does it work? – Finn Oct 24 '18 at 09:19
`` puts `everySecond` to true – Christian Vincenzo Traina Oct 24 '18 at 09:26
When do I need to give it true or false?How do I listener their events separately, and define css? – Finn Oct 24 '18 at 09:50

Suresh Kumar Ariya · Accepted Answer · 2018-10-25T03:42:21.173

2

May be you can define another input i.e atype='events' or atype='css'.

Based on input type, you can handle click events and define CSS properties.

<span everySecond="true" atype="events"> 
 everySecond 
 <span everyTwoSeconds atype="css">
 everyTwoSeconds
 </span>
</span>

https://stackblitz.com/edit/angular-nwobuk

edited Oct 25 '18 at 03:42

answered Oct 24 '18 at 10:01

Suresh Kumar Ariya

9,516
1
18
27

thank! it's work.But, how to set their css separately, like by `Renderer2`. – Finn Oct 25 '18 at 01:47
`constructor(private renderer: Renderer2)` is build both `everySecond` and `everyTwoSeconds`,can be defined individually? – Finn Oct 25 '18 at 03:37
sorry, I mean like this `if (this.everySecond){ one = this.renderer; }else if(this.everytwoSecond){ two = this.renderer;}`, when I click `everySecond`,can I to set css for `this.one` or `this.two` or both? – Finn Oct 25 '18 at 04:06
You don't need any condition. Straight away access this.elementRef.nativeElement will give access to the particular DOM Element. Refer stackblitz – Suresh Kumar Ariya Oct 25 '18 at 04:37
updated at `ping.directive.ts` line 20 : https://stackblitz.com/edit/angular-tdwzy2?file=src%2Fapp%2Fping.directive.ts – Finn Oct 25 '18 at 05:24
We can't achieve this. may be you can try this.el.nativeElement.parentNode; – Suresh Kumar Ariya Oct 25 '18 at 05:43

angular directive multiple selectors and @HostListener, @HostBinding

2 Answers2

Linked