The RxJS of function is a creation function that emits specified values.

How Does It Work?

The of creation function takes in a set of values, creates an Observable that emits those values, and completes.

The Observable created with of is synchronous, meaning the values are emitted and it completes immediately after it is subscribed.

The above example passes three strings to the of function and subscribes.

Each of the three strings are then emitted and logged.

What Are Some Common Uses?

Sample code to try out a pipeline of operations.

of(1, 2, 3)

User selects items for processing (ids of products in a cart, ids of selected songs for a playlist, etc.) and those items are emitted from an Observable.

of(45, 72, 21)

For branching when one branch returns an Observable and another returns a static value as an Observable (such as null, an empty array, or an initialized value).

of(null)
of({})
of(this.initializedProduct())

As a more concrete example of branching:

  getProduct(id: number): Observable<Product> {
    if (id === 0) {
      return of(this.initializeProduct()); // <-- of() used here
    }
    const url = `${this.productsUrl}/${id}`;
    return this.http.get<Product>(url)
      .pipe(
        tap(data => console.log(JSON.stringify(data))),
        catchError(this.handleError)
      );
  }