Skip to content

Commit

Permalink
update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
nadavsinai committed Jul 23, 2016
1 parent f2e6bd8 commit 29c08a2
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 3 deletions.
26 changes: 25 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1 +1,25 @@
# Obser
# Observable Events Directive

Angular 2 pushes the developer towards observable "stream" programming.
This is modeled very nicely for state changes using inputs and the async pipe.
However getting dom events observables is a bit cumbersome if done right,I made this little helper to make it a little easier.

It is easy to use [Rx.Observable.fromEvent](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-fromEvent) constructor somewhere in your component code,
however this will be against angular 2 paradigm of not accessing the DOM directly as for the first paramter you will need reference to a native DOM element.

My code uses [Rx.Observable.fromEventPattern](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-fromEventPattern), utilizing the renderer .listen method
which goes though all the abstraction needed for both the webWorker and server use cases as well as the obvious browser use case.


##Use

- Add the exported ObservableEvents directive class to your directives array in your component or below it.
- use the ObsEvents='' attribute selector on the dom element you would like to monitor, the value should be the event type (without the "on") eg : ObsEvents="click"
- If you need more than one event observable you can separate multiple event names with a comma eg : ObsEvents="mousemove,mouseup,mousedown"
- add a local template variable to the DOM node - #myObs='$' , the part that's set here is the $ in the value's place, myObs is just an example
- use @ViewChild('myObs') to recieve the exported observable to your component's class, remember it is only available after ngAfterViewInit hook has been called.

example code in src folder



12 changes: 10 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,14 @@
],
"typings": "./dist/observable.events.directive.d.ts",
"author": "Nadav Sinai",
"maintainers": [
{
"email": "[email protected]",
"name": "Nadav Sinai"
}
],
"main": "./dist/observable.events.directive.js",
"license": "ISC",
"license": "MIT",
"dependencies": {
"@angular/common": "2.0.0-rc.4",
"@angular/compiler": "2.0.0-rc.4",
Expand Down Expand Up @@ -56,5 +62,7 @@
"karma-jasmine": "^0.3.8",
"rimraf": "^2.5.2"
},
"repository": {}
"repository": {
"url": "https://github.com/nadavsinai/ng2-observable-events.git"
}
}

0 comments on commit 29c08a2

Please sign in to comment.