0

Its said that we can convert anything into stream using rxjs, here i want to convert the data coming from input field into stream and later subscribe to it, there is method in angular2 for this using valueChanges event

this.input.valueChanges.subscribe( 
   (value: string) => { console.log('sku changed to: ', value); } 
);

but when Im trying to create stream in component class like this 

Observables.create().subscribe()

the create is not recognized, also how can i do this in rxjs as value changes into input field, its related to angular2 forms, also what is useful function to create stream for this

Mark Rajcok
  • 362,217
  • 114
  • 495
  • 492
blackHawk
  • 6,047
  • 13
  • 57
  • 100
  • Looks like a dup of http://stackoverflow.com/questions/35800792/how-do-you-return-new-observablefunctionobserver-with-rxjs-v5?noredirect=1#comment59272278_35800792 – Günter Zöchbauer Mar 04 '16 at 17:06
  • no i know how to create stream but problem is Observables.create giving error in the component class like its not allowed in class to create, how can i make avaliable it into component class – blackHawk Mar 04 '16 at 17:15
  • move it into a function – Günter Zöchbauer Mar 04 '16 at 17:21
  • 1
    `this.input.valueChanges` is already an `Observable` that you can `subscribe()` to in order to get the stream of changes. What is your actual question? – Mark Rajcok Mar 04 '16 at 18:48
  • I find that using a `Subject` works great. For example: `var stream = new Subject(); stream.next("some changes");` Of course, you have to `import Subject`. The `Subject` is an `Observable` that can be subscribed to. – Stephen Chung Mar 05 '16 at 09:12

2 Answers2

4

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 { }
Abdulrahman Alsoghayer
  • 16,462
  • 7
  • 51
  • 56
0

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();
            });
Thierry Templier
  • 198,364
  • 44
  • 396
  • 360
  • I know about create method, problem is in the component class where i want write code to detect change into particular field's value using observable is not allowed, its allowed outside component class – blackHawk Mar 04 '16 at 17:35
  • What isn't exactly allowed in your component class? Just want to correctly understand your problem... – Thierry Templier Mar 04 '16 at 17:40
  • Why is the use of `Observable.create` not possible in your component class? See this plunkr: https://plnkr.co/edit/XqHYTqL2BadyVltajVhs?p=preview. – Thierry Templier Mar 04 '16 at 17:50