of

The of() operator is a creation operator. Its job is simple: it creates an Observable that takes a sequence of arguments you provide, emits each of those arguments one after the other in the order you provided them, and then immediately completes.

Think of it as a way to turn a fixed set of known values into an Observable stream.

Key Characteristics

• Synchronous: It emits all its values immediately and synchronously when you subscribe.
• Ordered: It emits the values in the exact order they are passed as arguments.
• Completes: After emitting the last value, it sends a completion notification.
• Takes Multiple Arguments: You list the values you want to emit directly as arguments to of().

Real-World Example Scenario

Imagine you have a component in your Angular application that needs to display a list of predefined, static options, like user roles available for selection, default chart types, or initial filter categories. These values are known upfront, they don't need to be fetched from an API right now, but maybe other parts of your application expect to work with Observables for consistency. of() is perfect for creating an Observable stream from this static list.

Example: Let's say you want to display a list of predefined priority levels ('Low', 'Medium', 'High', 'Critical') in a dropdown or as filter options.

Code Snippet (Angular Component)

import { Component, OnInit } from "@angular/core";
import { Observable, of } from "rxjs"; // Import 'of'

@Component({
  selector: "app-priority-options",
  template: `
    <h4>Available Priorities:</h4>
    <ul>
      <li *ngFor="let priority of priorities$ | async">{{ priority }}</li>
    </ul>
  `,
})
export class PriorityOptionsComponent implements OnInit {
  // Declare an Observable property to hold the stream of priorities
  priorities$: Observable<string> | undefined;

  ngOnInit(): void {
    console.log("Component initializing...");

    // Use of() to create an Observable from a fixed list of strings
    this.priorities$ = of("Low", "Medium", "High", "Critical");

    console.log(
      "Observable created with of(). Subscribing manually for demonstration..."
    );

    // Manual subscription (often handled by AsyncPipe in templates as shown above)
    this.priorities$.subscribe({
      next: (value) => {
        // This will be called for each value ('Low', 'Medium', 'High', 'Critical')
        console.log("Received priority:", value);
      },
      error: (err) => {
        // This won't be called in this case because of() doesn't error
        console.error("Error:", err);
      },
      complete: () => {
        // This will be called immediately after the last value ('Critical') is emitted
        console.log("Priority stream complete!");
      },
    });

    console.log("Subscription processing finished (synchronously).");
  }
}

Explanation:

1. import { of } from 'rxjs';: We import the of operator.
2. this.priorities$ = of('Low', 'Medium', 'High', 'Critical');: We call of() with our list of priority strings as arguments. This immediately creates an Observable (this.priorities$).
3. Subscription Behavior:
   • When subscribe() is called (either manually or via the async pipe), the Observable created by of() synchronously emits 'Low', then 'Medium', then 'High', then 'Critical'.
   • The next handler in our manual subscription logs each of these values.
   • Immediately after emitting 'Critical', the Observable sends the complete notification, and our complete handler logs "Priority stream complete!".
   • The error handler is never called because of() successfully emits its predefined values.
4. async pipe: In the template (*ngFor="let priority of priorities$ | async"), Angular's async pipe subscribes to priorities$, receives each value ('Low', 'Medium', etc.), updates the list, and automatically unsubscribes and handles completion/errors when the component is destroyed.

Summary

of() is a straightforward way to create an Observable when you have a fixed number of values readily available and you want them emitted sequentially as part of a stream.