0

I have a wrapper component for buttons which looks something like

<button [id]="fn()" (click)="this.click.emit()"></button>

I am using the selector to 

 <btn-generic>

and applying a separate click event to it ,but the click gets applied on the wrapper component as well,Is there a way to pass the click event on the button alone.

Igor
  • 60,821
  • 10
  • 100
  • 175
Tarangini Sarathy
  • 1
  • 1
  • You'll need to add some code to your question to demonstrate what you're doing. – Brandon Taylor Mar 01 '19 at 15:28
  • Possible duplicate: [Stop mouse event propagation](https://stackoverflow.com/questions/35274028/stop-mouse-event-propagation) – Korfoo Mar 01 '19 at 15:39
  • Possible duplicate of [Stop mouse event propagation](https://stackoverflow.com/questions/35274028/stop-mouse-event-propagation) – Igor Mar 01 '19 at 18:48
  • 1
    `[id]="fn()" (click)="this.click.emit()"` <= neither of those assignments make any sense. If you want help you need to provide an [mcve], I recommend creating one using https://stackblitz.com – Igor Mar 01 '19 at 18:53

1 Answers1

0

You have to add $event.stopPropagation() to the (click) event from the button.

Like this <button (click)="doSomething(); $event.stopPropagation()">click me!</button>

Korfoo
  • 571
  • 2
  • 12
  • Tried it ,it doesn't work.If I use the selector btn-generic on other components ,the (click) event is applied to the enitre wrapper component.I am unable to catch the event and stop it from propogation – Tarangini Sarathy Mar 01 '19 at 18:52