Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
tools/gulp
.gitignore
.npmignore
.travis.yml
.yo-rc.json
README.MD
bs-config.json
gulpfile.js
package-lock.json
package.json
tsconfig.json
tslint.json

README.MD

Build Status

Event Modifiers for Angular Applications (inspired by Vue)

Installation

To install this library, run:

$ npm install ngx-event-modifiers --save
import { EventModifiersModule } from 'ngx-event-modifiers';

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

Usage

  • (click.stop) - The click event's propagation will be stopped
  <button (click.stop)="onClick($event, extraData)">Click Me!!</button>
  • (click.prevent) - The submit event will no longer reload the page
  <button (click.prevent)="onClick($event, extraData)" type="submit">Click Me!!</button>
  • (click.self) - Only trigger handler if event.target is the element itself i.e. not from a child element
  <div (click.self)="onClick($event, extraData)">
    <button>Click Me!!</button>
  </div>
  • (click.once) - The click event will be triggered at most once
  <button (click.once)="onClick($event, extraData)">Click Me!!</button>
  • (click.outside) - The click event will be triggered only if clicked outside the current element
  <div>
    <button (click.outside)="onClick($event, extraData)">Click Me!!</button>
  </div>

You can also pass [eventOptions]:

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

License

MIT © Netanel Basal