https://github.com/NetanelBasal/ngx-event-modifiers

Event Modifiers for Angular Applications https://netbasal.com/implementing-event-modifiers-in-angular-87e1a07969ce
https://github.com/NetanelBasal/ngx-event-modifiers

angular2 dom events preventdefault stoppropagation

Last synced: 3 months ago
JSON representation

Event Modifiers for Angular Applications https://netbasal.com/implementing-event-modifiers-in-angular-87e1a07969ce

• Host: GitHub
• URL: https://github.com/NetanelBasal/ngx-event-modifiers
• Owner: NetanelBasal
• Created: 2017-10-25T19:14:52.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-10-27T06:22:01.000Z (about 7 years ago)
• Last Synced: 2024-07-05T13:23:03.045Z (7 months ago)
• Topics: angular2, dom, events, preventdefault, stoppropagation
• Language: TypeScript
• Homepage:
• Size: 74.2 KB
• Stars: 15
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.MD

Awesome Lists containing this project

• my-awesome-list - ngx-event-modifiers - event-modifiers-in-angular-87e1a07969ce | NetanelBasal | 15 | (TypeScript)

README

        
[![Build Status](https://travis-ci.org/NetanelBasal/ngx-event-modifiers.svg?branch=master)](https://travis-ci.org/NetanelBasal/ngx-event-modifiers)

## Event Modifiers for Angular Applications (inspired by Vue)

### Installation

To install this library, run:

```bash

$ npm install ngx-event-modifiers --save

```

```typescript

import { EventModifiersModule } from 'ngx-event-modifiers';

@NgModule({

  imports: [

    EventModifiersModule

  ]

})

export class AppModule { }

```

### Usage

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

```html

  Click Me!!

```

- `(click.prevent)` - The submit event will no longer reload the page

```html

  Click Me!!

```

- `(click.self)` - Only trigger handler if event.target is the element itself i.e. not from a child element

```html

  


    Click Me!!

  

```

- `(click.once)` - The click event will be triggered at most once

```html

  Click Me!!

```

- `(click.outside)` - The click event will be triggered only if clicked outside the current element

```html

  


    Click Me!!

  

```

You can also pass `[eventOptions]`:

```html

  


     Click Me!!

  

```

## License


MIT © [Netanel Basal](mailto:[email protected])