Learn about Angular signals in just 20 minutes

Angular signals, also known as observables, are a powerful tool in Angular for handling asynchronous operations and data streams. In this tutorial, we will dive deep into the concept of signals in Angular and learn how to understand and utilize them effectively in just 20 minutes.

What are Angular Signals/Observable?

Signals in Angular are based on the observable design pattern, which allows us to subscribe to a data stream and react to changes in the data. Observables are a way to handle asynchronous events in a more structured and manageable way compared to promises.

Signals can emit multiple values over time, making them excellent for handling real-time data streams. They can be created from various sources, such as API calls, user input events, or even timers.

Understanding Observables

Before we start using signals in Angular, let’s understand some fundamental concepts of observables:

1. Observable: An observable represents a data stream that we can subscribe to and receive updates from over time. It can emit multiple values and complete or error out. Observables are lazy, meaning they won’t do anything until someone subscribes to them.

2. Subscriber: A subscriber is an object or function that listens to the data emitted by the observable. It can be a function with callbacks for next, error, and complete.

3. Operators: Operators are functions that can manipulate the data emitted by an observable. They allow us to transform, filter, group, and merge signals.

Creating Observables in Angular

Now let’s see how we can create observables in Angular using the RxJS library, which is the library Angular uses to work with signals:

1. Create an Observable: We can create an observable using the new Observable() constructor and providing a function that takes an observer as an argument. The observer object has methods like next(), error(), and complete().

import { Observable } from 'rxjs';

const customObservable = new Observable(observer => {
  observer.next(1);
  observer.next(2);
  observer.complete();
});

1. Subscribe to an Observable: To consume the values emitted by an observable, we need to subscribe to it. We can use the subscribe() method on the observable passing in callbacks for next, error, and complete.

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

1. Using Operators: We can use operators to manipulate the data emitted by an observable. Operators are chained to an observable using the pipe() method. Here’s an example of using the map() operator to double the emitted values:

import { map } from 'rxjs/operators';

customObservable.pipe(
  map(value => value * 2)
).subscribe(value => console.log(value));

Handling Signals in Angular Components

Now that we know how to create and manipulate observables let’s see how we can use them in Angular components:

1. Using HttpClient: One common use case for signals in Angular is making HTTP requests. Angular’s HttpClient module returns observables for all its HTTP methods. Here’s an example of making a GET request and subscribing to the response:

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

constructor(private http: HttpClient) {}

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

1. Using Async Pipe: An easy way to consume observables in Angular templates is to use the async pipe. The async pipe subscribes to an observable and automatically updates the view with the emitted values.

<div>{{ data$ | async }}</div>

1. Avoid Memory Leaks: When using signals in Angular components, it’s essential to unsubscribe from them when the component is destroyed to avoid memory leaks. We can achieve this by using the takeUntil() operator along with a subject that emits when the component is destroyed.

private onDestroy = new Subject();

ngOnInit() {
  this.customObservable.pipe(
    takeUntil(this.onDestroy)
  ).subscribe(value => console.log(value));
}

ngOnDestroy() {
  this.onDestroy.next();
  this.onDestroy.complete();
}

In just 20 minutes, you have learned how to understand and utilize Angular signals effectively. Signals are a powerful tool for handling asynchronous operations in Angular applications. By mastering observables and operators, you can build more responsive and real-time applications. So, start exploring signals in your Angular projects and unlock their full potential. Happy coding!