RxJS provides many methods for creating data streams, the following are common methods for creating data streams.

1. create method

Use the create method to create a new Observable, when the observer (Observer) subscribes to the Observable, it will execute the specified function.

    import { Observable } from 'rxjs';
     
    let ob: Observable<any> = Observable.create((observer: any) => {
      observer.next(1);
      observer.next(2);
    });
    ob.subscribe(d => { console.log(d); });

The Observable.create method has been deprecated in the latest Angular version , and it is recommended to use new Observable() instead:

     import { Observable } from 'rxjs';
     
     let ob: Observable<any> = new Observable((observer: any) => {
      observer.next(1);
      observer.next(2);
    });
    ob.subscribe(d => { console.log(d); });

2. of method

Use the of method to create data streams that output single and multiple values. Example of outputting a single value:

import { of, Observable } from 'rxjs';
 
let ob: Observable<any> = of([1, 2, 3]);
ob.subscribe(d => { console.log(d); });  
 // 输出：
 // [1,2,3]

Multiple values can be output when a sequence is used as an argument:

let ob: Observable<any> = of(1, 2, 3);
ob.subscribe(d => { console.log(d); });  
 // 输出：
 // 1
 // 2
 // 3

3. from method

Use the from method to create a data stream. You can create an Observable from an array, array-like object, Promise , iterator object, or Observable- like object .

    import { from, Observable } from 'rxjs';
    
    // 从数组创建Observable 
    let ob: Observable<any> = from([1, 2, 3]);
    ob.subscribe(d => { console.log(d); });  
    // 输出：
    // 1
    // 2    
    // 3   
    
    //从Promise创建Observable
    let promise = new Promise<any>((resolve) => {
      resolve([1, 2, 3]);
    });
    let ob: Observable<any> = from(promise);
    ob.subscribe(d => { console.log(d); });  
     // 输出：
     // [1,2,3]

4. The interval method

Use the interval method to create a data stream that emits values at regular intervals.

import { interval, Observable } from 'rxjs';

let ob: Observable<any> = interval(1000);
ob.subscribe(d => { console.log(d); });   
//每间隔1秒输出0,1,2,3,4,...

5. timer method

Use the timer method to create a data stream that emits values at fixed intervals after the initial delay

import { timer, Observable } from 'rxjs';

let ob: Observable<any> = timer(5000, 1000);
ob.subscribe(d => { console.log(d); });  
//5秒钟过后每间隔1秒输出0,1,2,3,4,...

6. fromEvent method

Use the fromEvent method to create an Observable by adding event listeners to the "event target" .

  import { fromEvent } from 'rxjs';

  const button = document.querySelector('#btn') as HTMLElement;
  let ob: Observable<any> = fromEvent(button, 'click');
  ob.subscribe(d => { console.log('button clicked. '); });

7、Subject.asObservable()

In Angular, data streams can be created by calling the asObservable() method of the Subject object:

import { Injectable } from '@angular/core';
import { Subject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ProcessService {

  constructor() { }

  /**
   * 进度
   */
  private progress: Subject<number> = new Subject<number>();

  /**
   * 进度改变事件
   */
  progressChange: Observable<number> = this.progress.asObservable();

  /**
   * 更新进度
   */
  setProgress(process: number) {
    this.progress.next(process);
  }

}

Through this.progress.asObservable() in the above code , a data stream for updating the progress of the operation is created. You can send data by calling the setsetProgress() method, and subscribe to proceeService.progressChange.subscribe() on other pages. The progress data sent out is processed in response.

In fact, the definition of Subject is an extension of Observable that allows multicasting .

/**
 * A Subject is a special type of Observable that allows values to be
 * multicasted to many Observers. Subjects are like EventEmitters.
 *
 * Every Subject is an Observable and an Observer. You can subscribe to a
 * Subject, and you can call next to feed values as well as error and complete.
 *
 * @class Subject<T>
 */
export declare class Subject<T> extends Observable<T> implements SubscriptionLike {}

There are many other ways to create Observable in RxJS . Please refer to the official documentation for details. This article only lists the simple methods commonly used in Angular.

[RxJS in Angular] - Create data flow