Le Signal dans Angular : Pourquoi et comment t’en servir en moins de 15 minutes

Avec la popularité croissante d’Angular, il est essentiel de comprendre le rôle des signaux dans ce framework. Les signaux sont des outils puissants pour la communication entre les composants d’une application Angular.

Pourquoi utiliser le signal dans Angular ?

Les signaux permettent de faciliter la communication entre les composants d’une application Angular. Ils offrent une méthode de transmission de données et d’événements de manière simple et efficace. En utilisant des signaux, il est possible de créer des applications plus modulaires et réactives.

Comment utiliser le signal dans Angular en moins de 15 minutes

Voici un exemple simple d’utilisation des signaux dans Angular :

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

    @Injectable({
      providedIn: 'root'
    })
    export class SignalService {
      private signal = new Subject();

      sendSignal(message: any) {
        this.signal.next(message);
      }

      getSignal() {
        return this.signal.asObservable();
      }
    }
    

Dans cet exemple, nous créons un service SignalService qui contient un objet Subject de la bibliothèque RxJS. Ce sujet est utilisé pour émettre et écouter des signaux au sein de l’application.

Pour émettre un signal depuis un composant, nous utilisons la méthode sendSignal() du SignalService :

    import { Component } from '@angular/core';
    import { SignalService } from './signal.service';

    @Component({
      selector: 'app-example',
      template: `
        Emit Signal
      `
    })
    export class ExampleComponent {
      constructor(private signalService: SignalService) {}

      emitSignal() {
        this.signalService.sendSignal('Hello from ExampleComponent!');
      }
    }
    

Enfin, pour recevoir et réagir à un signal dans un autre composant, nous utilisons la méthode getSignal() du SignalService :

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

    @Component({
      selector: 'app-listener',
      template: `
        
{{ message }}
      `
    })
    export class ListenerComponent implements OnInit {
      message: any;

      constructor(private signalService: SignalService) {}

      ngOnInit() {
        this.signalService.getSignal().subscribe((message) => {
          this.message = message;
        });
      }
    }
    

Conclusion

En moins de 15 minutes, vous pouvez commencer à utiliser les signaux dans Angular pour améliorer la communication entre les composants de votre application. Avec les signaux, vous pouvez créer des applications plus réactives et modulaires, ce qui facilite la maintenance et l’extension du code.