angular observables rxjs asynchronous examples
0 likes

Angular Observables Overview with Detailed Examples

Angular Observables Overview with Detailed Examples

Angular, with its dependency on RxJS, has deeply integrated the concept of Observables, offering a powerful mechanism to handle asynchronous operations and events. This article aims to provide an overview of Observables in Angular along with illustrative examples.

1. What is an Observable?

An Observable is a core concept from the RxJS library, which Angular uses extensively. At its core, an Observable represents a lazy push-based collection of multiple values over time.

Key points:

  • Producer: Observables serve as a producer of multiple values.
  • Push: Observables push data to the subscribers.
  • Lazy: Observables won't execute until someone subscribes to them.

2. Creating an Observable

Using RxJS, creating an Observable is straightforward:

Copy Code 
import { Observable } from 'rxjs';

const myObservable = new Observable(observer => {
  observer.next('Hello');
  observer.next('World');
  observer.complete();
});

3. Subscribing to an Observable

To consume the data produced by an Observable, you need to subscribe to it:

Copy Code 
myObservable.subscribe(value => console.log(value));
// Output:
// Hello
// World

4. Example: Handling HTTP Requests

Angular's HttpClient returns Observables, making it easy to handle asynchronous HTTP requests:

Copy Code 
import { HttpClient } from '@angular/common/http';

export class DataService {
  constructor(private http: HttpClient) {}

  fetchData() {
    this.http.get('https://api.example.com/data').subscribe(data => {
      console.log(data);
    });
  }
}

5. Error Handling

To handle errors, the subscribe method accepts three callbacks: one for values, one for errors, and one for completion:

Copy Code 
myObservable.subscribe(
  value => console.log(value),
  error => console.error(error),
  () => console.log('Completed')
);

6. Unsubscribing

To prevent memory leaks, especially in components, it's crucial to unsubscribe from Observables when they're no longer needed:

Copy Code 
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-demo',
  template: '...'
})
export class DemoComponent implements OnInit, OnDestroy {
  private subscription: Subscription;

  ngOnInit(): void {
    this.subscription = myObservable.subscribe(value => console.log(value));
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
}

7. Using Operators

RxJS provides a range of operators to transform, filter, and combine Observables:

Copy Code 
import { of } from 'rxjs';
import { map } from 'rxjs/operators';

const nums = of(1, 2, 3, 4, 5);
const squared = nums.pipe(map(num => num * num));
squared.subscribe(value => console.log(value)); // Outputs squared numbers

Conclusion

Observables, backed by RxJS, are a fundamental building block in Angular applications, offering a robust solution to handle asynchronous operations and events. Through understanding and efficiently using Observables, you can craft more reactive, scalable, and maintainable Angular applications.

0 comments