Angular 2 Directive - How do you know which child invoked the directive?

Question

Say I have a markup something like the following:

<ul someSelector>
    <li>Item 1</li>
    <li>Item 2</li>
    ...
</ul>

And I have a directive something like this:

@Directive({
    selector: '[someSelector]'
})
export class SomeDirective {

    @HostListener('click') someFunction() {
        // Know which child LI that was clicked on at this point;
        // Say I want to add some class to that LI
    }

}

Clicking on any of the list items will invoke (the directive and) someFunction() method. In the scope of the method, I want to know which of the list item was clicked. Is this possible?

I could create another directive and place it in each <li> but since the parent already has a directive I feel it's an overkill to do that.

@HostListener documentation wasn't very helpful.

https://stackoverflow.com/questions/41700724/angular2-hostlistener-how-can-i-target-an-element-can-i-target-based-on-class#41700814 — user3145373 ツ, Aug 29 '17 at 04:34
@Rajez Angular documentation warns against using ElementRef. Says use it only as the last resort. No other resorts? — Dilip Raj Baral, Aug 29 '17 at 04:43
@DilipRajBaral: can you use `(click)` for this ? on click you can detect element as well. If you want to emit any event to parent then you can do that as well. — user3145373 ツ, Aug 29 '17 at 04:45
you can see https://stackoverflow.com/questions/40986464/angular-2-select-clicked-list-item-add-active-class-and-remove-from-sibling if your `li` is dynamic. — user3145373 ツ, Aug 29 '17 at 04:46
@user3145373ツ No. I want to achieve this inside the directive itself. — Dilip Raj Baral, Aug 29 '17 at 04:48

score 2 · Accepted Answer · answered Aug 29 '17 at 04:54

<ul appSomedirective>
    <li>Item 1</li>
    <li>Item 2</li>
    ...
</ul>


import { EventEmitter, HostListener, Directive } from '@angular/core';

    @Directive({
      selector: '[appSomedirective]'
    })
    export class SomedirectiveDirective {
    numberOfClicks:Number;
      constructor() { }
     @HostListener('click', ['$event.target'])  someFunction(event) {
        debugger;
         console.log("button", event.innerText, "number of clicks:");

        }
    }

It's Working fine, You may try this.

Angular 2 Directive - How do you know which child invoked the directive?

1 Answers1