Angular Signals: A Comprehensive Guide

Angular signals are a key concept in Angular development. They provide a way for components to communicate with each other, allowing for better modularity and organization of code.

How do Angular Signals work?

In Angular, signals are typically implemented using a service or a shared singleton object. This service contains different signals that components can subscribe to and emit signals when necessary.

When a component subscribes to a signal, it provides a callback function that will be executed when the signal is emitted. This allows components to react to changes or events happening elsewhere in the application.

Using Angular Signals in Practice

Let’s say we have a shopping cart component that needs to be notified when a new item is added to the cart. We can create a signal in a shared service for this purpose:

        
            import { Injectable } from '@angular/core';
            import { Subject } from 'rxjs';

            @Injectable()
            export class CartSignalService {
              addNewItemSignal = new Subject();
            }
        
    

Now, in our shopping cart component, we can subscribe to this signal and update the cart accordingly:

        
            import { Component, OnInit } from '@angular/core';
            import { CartSignalService } from './cart-signal.service';

            @Component({
              selector: 'app-shopping-cart',
              templateUrl: './shopping-cart.component.html',
              styleUrls: ['./shopping-cart.component.css']
            })
            export class ShoppingCartComponent implements OnInit {

              constructor(private signalService: CartSignalService) {}

              ngOnInit() {
                this.signalService.addNewItemSignal.subscribe((item: string) => {
                  // Update cart with new item
                });
              }

            }
        
    

Elsewhere in the application, when a new item is added to the cart, we can emit the signal provided by the shared service:

        
            addItemToCart(item: string) {
              this.signalService.addNewItemSignal.next(item);
            }
        
    

Conclusion

Angular signals are a powerful tool for communication between components in an Angular application. By using signals, we can create a more modular and organized codebase, making it easier to maintain and scale our applications.