Skip to content

✋ Stop propagation for everyday events with Angular directives 🎩

Notifications You must be signed in to change notification settings

NetanelBasal/ngx-stop-propagation

Repository files navigation

Build Status

✋ 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