Git Product home page Git Product logo

angular2-multievent-bindings-plugin's Introduction

angular2-multievent-bindings-plugin

A small plugin that allows for binding multiple events into an Angular2 template.

Currently there is no way to bind multiple events to one expression in angular2 templates like this:

	<input type='text' (click,keypress,mousedown)=expressionIdWantToExecuteForAllOfTheseEvents($event) />

This plugin allows you to do this!!!

Installation

npm install angular2-multievent-bindings-plugin --save

Useage

import this plugin from your node modules and then add it to your EVENT_MANAGER_PLGUINS:

	
	import {MultiEventPlugin} from 'angular2-multievent-bindings-plugin';
	import {EVENT_MANAGER_PLUGINS} from '@angular/platform-browser';
	import {bootstrap} from '@angular/platform-browser-dynamic';
	import {provide} from '@angular/core';
	import {App, APP_PROVIDERS} from './app';

	bootstrap(App, [
		APP_PROVIDERS,
		provide(EVENT_MANAGER_PLUGINS, { multi: true, useClass: MultiEventPlugin})
	]).catch((error) => console.error(error));

angular2-multievent-bindings-plugin's People

Contributors

dannnno avatar thelarkinn avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar

Forkers

dannnno

angular2-multievent-bindings-plugin's Issues

Failed to execute 'setAttribute' on 'Element'

I have a component with a template that looks like this

<div class="form-group">
    <label>Starting on: </label>
    <input type='date' 
            (keyup.enter, blur)="doStuff()"
            [(ngModel)]="start"
            class="form-control" />
</div>
<div class="form-group">
    <label>Ending on: </label>
    <input type='date' 
            (keyup.enter, blur)="doStuff()"
            [(ngModel)]="end"
            class="form-control" />
</div>

Which results in an error like this

Error: Failed to execute 'setAttribute' on 'Element': '(keyup.enter,' is not a valid attribute name.
    at Error (native)
    at BrowserDomAdapter.setAttribute (http://localhost:58246/lib/@angular/platform-browser/platform-browser.umd.js:1138:94)
    at DomRenderer.setElementAttribute (http://localhost:58246/lib/@angular/platform-browser/platform-browser.umd.js:1986:30)
    at DebugDomRenderer.setElementAttribute (http://localhost:58246/lib/@angular/core/core.umd.js:10239:28)
    at DebugAppView._View_ClosedTicketsComponent0.createInternal (ClosedTicketsComponent.template.js:71:17)
    at DebugAppView.AppView.create (http://localhost:58246/lib/@angular/core/core.umd.js:9862:25)
    at DebugAppView.create (http://localhost:58246/lib/@angular/core/core.umd.js:10054:48)
    at DebugAppView._View_DashboardComponent0.createInternal (DashboardComponent.template.js:49:15)
    at DebugAppView.AppView.create (http://localhost:58246/lib/@angular/core/core.umd.js:9862:25)
    at DebugAppView.create (http://localhost:58246/lib/@angular/core/core.umd.js:10054:48)

My boot.ts looks like this

import { MultiEventPlugin } from 'angular2-multievent-bindings-plugin';
import { EVENT_MANAGER_PLUGINS } from '@angular/platform-browser';
import { HTTP_PROVIDERS } from '@angular/http';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { provide } from '@angular/core';
import { AppComponent }   from './app';

bootstrap(AppComponent , [
    HTTP_PROVIDERS,
    provide(
        EVENT_MANAGER_PLUGINS,
        { multi: true, useClass: MultiEventPlugin }
    )
]);

Am I missing something obvious?

update for angular4

Hi, I cannot get the package to work in angular4.

Is there an update that will allow it to work in angular4?

Thanks

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.