Observables and Promises

Here is the next blog based on the second topic: Observables and Promises.

Mastering Observables and Promises in Angular: A Guide for Interviews

Angular heavily relies on asynchronous programming to handle data and events effectively. Observables and Promises are the two main tools used for managing asynchronous operations. This blog dives into these concepts and provides interview questions with detailed answers.

What Are Observables?

Observables are a core feature of RxJS (Reactive Extensions for JavaScript) used in Angular. They allow you to work with asynchronous data streams, providing greater flexibility compared to Promises.

Key Features:

• Emit multiple values over time.
• Lazy execution (doesn’t run until subscribed to).
• Can be canceled using unsubscribe.

What Are Promises?

Promises represent a single future value. Once a promise is resolved or rejected, it cannot emit further values.

Key Features:

• Handles a single asynchronous event.
• Eager execution (runs immediately upon creation).
• Cannot be canceled.

Expected Interview Questions and Answers

1. What is the difference between Observables and Promises?

Answer:

• Observables emit multiple values over time, while Promises handle a single value.
• Observables are lazy and need to be subscribed to, while Promises execute eagerly.
• Observables can be canceled using unsubscribe, whereas Promises cannot be canceled.

2. How do you create an Observable in Angular?

Answer: You can create an Observable using the Observable class from RxJS:

import { Observable } from 'rxjs';

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

3. How is an Observable subscribed to?

Answer: You subscribe to an Observable using the subscribe method:

observable.subscribe({
  next: (value) => console.log(value),
  complete: () => console.log('Completed'),
});

4. When should you use Promises over Observables?

Answer:

• Use Promises for single-value asynchronous tasks (e.g., HTTP calls).
• Use Observables for multi-value streams (e.g., WebSocket messages or user input streams).

5. How does Angular use Observables internally?

Answer:

• HTTPClient: Returns an Observable for HTTP operations.
• Forms: Emits events for form control value changes.
• Routing: Observables are used for route guards and parameters.

Code Example: HTTP Requests with Observables and Promises

Using Observables:

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

constructor(private http: HttpClient) {}

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

Using Promises:

getDataPromise() {
  fetch('https://api.example.com/data')
    .then((response) => response.json())
    .then((data) => console.log(data));
}

Conclusion

Understanding Observables and Promises is vital for managing asynchronous tasks in Angular applications. Focus on how Observables enable reactive programming and how Angular leverages them for handling real-time updates.