Angular2: click listener with *ngFor

Question

I'm trying to create a list of components and to attach a click event listener that registers the index of the component clicked.

I can achieve this by attaching the event listener at my leaf node, as it knows its index. But then I have to bubble the event up one more time than I might need to. What I'd prefer to do is have the following at the parent of the leaves:

  template: `
    <trackpoint
        *ngFor='#tp of lapData; #i=index'
        [tp]='tp'
        [index]='i'
        [ngClass]="{selected:selectedTps[i]}"
        (click)='handleClick($event)'>
    </trackpoint>
  `,

and in my controller

handleClick(e:MouseEvent) {
   console.log(e);
   this.lapEventHandler.next({
   // I want to be able to access i from the template
  });
}

I've been examining the the MouseEvent object but although I can find the Trackpoint among the event parents, I cannot find the index property. Am I trying to do the impossible.

Maybe I'm missing something but your code seems to add the event handler on each generated code but you explain that this is not what you actually want. I don't understand your question. — Günter Zöchbauer
– Günter Zöchbauer, Commented Jan 14, 2016 at 9:23
I started with the click handler in the trackpoint component, but I wanted to attach to trackpoint's parent - the code you see. Vlado provided a solution — Simon H
– Simon H, Commented Jan 14, 2016 at 9:26

Vlado Tesanovic · Accepted Answer · 2016-01-14 09:20:49Z

7

Try with

(click)='handleClick($event, i)

and

handleClick(e:MouseEvent, i: any)

answered Jan 14, 2016 at 9:20

Vlado Tesanovic

6,4242 gold badges22 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2: click listener with *ngFor

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related