Issue 1:
Is there any way we can get more sugar for events as observables e.g.

import {Component, View, Directive, Output, EventEmitter, HostListener} from 'angular2/angular2';
import {DOM} from 'angular2/src/core/dom/dom_adapter';
import {ElementRef} from 'angular2/core';

@Directive({
selector: '[draggable]'
})
export class Draggable {
mouseup = new EventEmitter();
mousemove = new EventEmitter();
mousedown = new EventEmitter();
mousedrag;

@HostListener('mouseup', ['$event'])
onMouseup(event) {
this.mouseup.next(event);
}

@HostListener('mousedown', ['$event'])
onMousedown(event) {
this.mousedown.next(event);
}

@HostListener('mousemove', ['$event'])
onMousemove(event) {
this.mousemove.next(event);
}

constructor(public element: ElementRef) {

this.element.nativeElement.style.position = 'relative';
this.element.nativeElement.style.cursor = 'pointer';

this.mousedrag = this.mousedown._subject
.map(event => {
event.preventDefault();
// calculate offsets when mouse down
return {
left: event.clientX - this.element.nativeElement.getBoundingClientRect().left,
top: event.clientY - this.element.nativeElement.getBoundingClientRect().top
};
})
.flatMap(imageOffset => {
return this.mousemove._subject
.map(pos => {
// calculate offsets from mouse down to mouse moves
return {
top: pos.clientY - imageOffset.top,
left: pos.clientX - imageOffset.left
};
})
.takeUntil(this.mouseup._subject);
});

}

onInit() {
this.mousedrag.subscribe({
next: pos => {
// Update position
this.element.nativeElement.style.top = pos.top + 'px';
this.element.nativeElement.style.left = pos.left + 'px';
}
});
}

}

@Component({
selector: 'app'
})
@View({
// needed in order to tell Angular's compiler what's in the template
directives: [ Draggable ],
styles: [`
[draggable] {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
background-image: url(https://cdn.rawgit.com/Reactive-Extensions/rx.angular.js/master/examples/draganddrop/logo.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
height: 200px;
width: 200px;
color: #000000;
border: 1px solid #666666;
padding: 10px;
}
`],
template: `

<div draggable>
Draggable Div
</div>

`
})
export class App {
constructor() {

}
}

[sidenote] bonus points if you can understand this madness

this.mousedrag = this.mousedown._subject.map(event => (event.preventDefault(), {
left: event.clientX - this.element.nativeElement.getBoundingClientRect().left,
top: event.clientY - this.element.nativeElement.getBoundingClientRect().top
})).flatMap(imageOffset => this.mousemove._subject.map(pos => ({
top: pos.clientY - imageOffset.top,
left: pos.clientX - imageOffset.left
})).takeUntil(this.mouseup._subject));

Issue 2:
Not sure this is a good idea, or even possible, but thought I'd throw it out there.

In vanilla Rx, if I wanted to listen to a DOM event to do a typeahead or something I'd do something like:

//get DOM element
const input = document.getElementById('myInput');
//observable of click events
const inputs$ = Rx.Observable.fromEvent(input, 'keyup');
//map changes to requests
const responses$ = inputs$.flatMap(ev => myHttpService.get(ev.target.value));
//subscribe to responses
responses$.subscribe(json => console.log(json));

In current ng2, if I wanted to do the equivalent, I'd do something like:

@Component({
selector: 'my-component'
})
@View({
template: `
<div [ng-form-model]="myForm">
<input type="text" ng-control="query">
</div>
<ul>
<li *ng-for="#result of results | async">{{result.text}}</li>
</ul>
`
})
class MyComponent {
constructor(public http: Http, fb: FormBuilder){
//create form group
this.myForm = fb.group({
query: ""
});
//subscribe to value changes, map to responses, bind to view w/ pipe
this.results = this.myForm.controls.query.valueChanges
.toRx()
.flatMap(query => this.http.get(`/foos?q=${query}`)
.map(res => res.json());
}
}

This all works great (or will, once Rx stuff settles).

However, if I wanted to do the same sort of thing from an arbitrary event (unrelated to forms, like a mousedrag or button click or whatever), there's not a good way (I can see) to get an Observable from a DOM event, so you have to do something like:

<button (click)="makeRequest($event)">Make Request</button>

//snip
class MyComponent {
makeRequest($event){
this.http.get($event.target.url)
.map(res => res.json())
.subscribe(results => this.results = results);
}
}

which isn't nearly as clean.

Proposed idea would be to provide a way to delegate / bind an arbitrary DOM event to a Subject/Observable, so that it could be easily subscribed to and handled reactively.

Something like (totally made up syntax here, point being we're binding the click event to the Subject):

Edit: see #4062 (comment) for current proposal

<button [(click)]="clicks$">make request</button>

class MyComponent {
clicks$ = new Rx.Subject();
constructor(){
this.results = this.clicks$
.flatMap(ev => http.get('someurl.json'))
.map(res => res.json())
}
}

I saw #3992, but I believe this is for emitting events "out" from the component, whereas this idea is more for usage within a component.

Thoughts?