rxjs with angular2: into component class how to convert input field data changes to rxjs stream

Angular 2 already have a FormControl which exposes a valueChanges observable that you can subscribe to.

Here is a working Plunker and the code:

The important parts are:
- [FormControl]="model" (in the input element)
- model = new FormControl() (from @angular/forms)

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';

@Component({
    selector: 'my-app',
    template: `
      Some Value: 
      <input type="text" [formControl]="model" />
      <div>{{model.value}}</div>
      <span *ngFor="let val of values">{{val}},</span>
    `
})
export class AppComponent {
  model:FormControl = new FormControl()
  values = [];
  constructor() {
    this.model.valueChanges.subscribe(s=>this.values.push(s));
  }
}

Also, in your AppModule you need to import ReactiveFormsModule

import { ReactiveFormsModule } from '@angular/forms';
...
@NgModule({
    imports: [
        ...
        ReactiveFormsModule
    ],
    declarations: [...],
    bootstrap: [...]
})

export class AppModule { }

I'm not sure to understand your problem but you can create a raw stream with the Observable class and its create method like this:

var observable = Observable.create((observer) => {
  // Should be execute asynchronously
  observer.next('some event');
});

In Angular2, the valueChanges observable allows to initiate an asynchronous processing chain. You can leverage operators like flatMap to link another observable. For example to execute an HTTP request when the value of an input changes:

var observable = this.input.valueChanges
            .flatMap((val) => {
              return this.http.get('http://...').map(res => res.map();
            });