Creating observables in Angular

Introduction

Observables let you watch for changes or events over time. They help your app react smoothly when data updates.

When you want to get data from a server and update the screen automatically.

When you need to listen to user actions like clicks or typing.

When you want to handle streams of data like messages or sensor readings.

When you want to combine or transform multiple data sources easily.

Syntax

Angular

import { Observable } from 'rxjs';

const myObservable = new Observable(subscriber => {
  const value = 'some value';
  // send data to subscriber
  subscriber.next(value);
  // complete when done
  subscriber.complete();
});

The Observable constructor takes a function that controls how data is sent.

Use subscriber.next() to send data, and subscriber.complete() to say no more data will come.

Examples

This observable sends one message 'Hello' and then finishes.

Angular

import { Observable } from 'rxjs';

const simpleObservable = new Observable(subscriber => {
  subscriber.next('Hello');
  subscriber.complete();
});

This observable sends numbers 0 to 3 every second, then stops.

Angular

import { Observable } from 'rxjs';

const countObservable = new Observable(subscriber => {
  let count = 0;
  const interval = setInterval(() => {
    subscriber.next(count++);
    if (count > 3) {
      subscriber.complete();
      clearInterval(interval);
    }
  }, 1000);
});

Sample Program

This Angular component creates an observable that sends a greeting after 2 seconds and then completes after 3 seconds. The message updates on the screen accordingly.

Angular

import { Component } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-observable-demo',
  template: `
    <h2>Observable Demo</h2>
    <p>Message: {{ message }}</p>
  `
})
export class ObservableDemoComponent {
  message = 'Waiting...';

  constructor() {
    const greeting$ = new Observable<string>(subscriber => {
      setTimeout(() => subscriber.next('Hello from Observable!'), 2000);
      setTimeout(() => subscriber.complete(), 3000);
    });

    greeting$.subscribe({
      next: msg => this.message = msg,
      complete: () => this.message += ' (completed)'
    });
  }
}

Important Notes

Always unsubscribe from observables in real apps to avoid memory leaks, especially for long-lived streams.

Observables can send multiple values over time, unlike promises that send only one.

Summary

Observables let you watch and react to data or events over time.

Create them using new Observable() and send data with subscriber.next().

Use observables to build responsive and interactive Angular apps.