✋ Stop propagation for everyday events with Angular directives 🎩

Installation

To install this library, run:

$ npm install ngx-stop-propagation --save

import { StopPropagationModule } from 'ngx-stop-propagation';

@NgModule({
  imports: [
    StopPropagationModule
  ]
})
export class AppModule { }

Usage

• (click.stop) - The click event's propagation will be stopped

  <button (click.stop)="onClick($event, extraData)">Click Me!!</button>

• (change.stop) - The change event's propagation will be stopped

  <input (change.stop)="onChange($event, extraData)">

• (mouseover.stop) - The mouseover event's propagation will be stopped

  <div (mouseover.stop)="onChange($event, extraData)"></div>

• (mouseenter.stop) - The mouseover event's propagation will be stopped

  <div (mouseenter.stop)="onChange($event, extraData)"></div>

You can also pass [eventOptions]:

  <div (click.stop)="onClick($event, extraData)"
       [eventOptions]="{preventDefault: true}">
     <button>Click Me!!</button>
  </div>

License

MIT © Netanel Basal