> ## Content Index
> Fetch the complete content index at: https://www.sfeir.dev/llms.txt
> Use this file to discover other available public pages before exploring further.

# Angular Signals vs RxJS : Une Transition vers des Services Plus Performants
- URL: https://www.sfeir.dev/angular-signals-vs-rxjs-une-transition-vers-des-services-plus-performants-2/
- Published: 2025-01-24T13:35:48.000Z
- Updated: 2025-01-24T13:35:48.000Z
- Description: Les Signaux Angular révolutionnent la réactivité des applications en surpassant RxJS dans la gestion du changement. Découvrez comment migrer vos services pour des performances optimales, illustré avec un exemple concret.
- Author: EL MNABHI Merouane
- Tags: Angular, rxjs, Signals, JavaScript, #front, TypeScript

Les Signaux Angular sont l’une des nouvelles fonctionnalités les plus excitantes introduites pour optimiser la réactivité des applications Angular. Mais quels avantages apportent-ils par rapport à RxJS, notamment en matière de *change detection* ? Dans cet article, nous allons explorer les différences entre les deux approches en démontrant comment passer d’un service basé sur RxJS à un service basé sur les Signaux Angular, avec un exemple concret.

## *Pourquoi les Signaux Angular ?*

Les Signaux Angular se distinguent par leur capacité à déclencher des changements de manière plus ciblée. Contrairement à RxJS, qui déclenche souvent des cycles de détection de changement (*change detection*) à chaque nouvelle émission, les Signaux déclenchent uniquement quand c’est nécessaire, ce qui rend l’application plus réactive et plus performante.

## *Objectifs*

- *Comprendre les différences de performance entre RxJS et les Signaux Angular.*
- *Comparer les deux technologies dans une application Angular.*
- *Découvrir un exemple de migration d’un service RxJS vers les Signaux Angular.*

## *Passer de RxJS aux Signaux Angular*

L’un des défis lorsqu’on travaille avec RxJS dans Angular est le nombre de cycles de détection de changement qu’il peut générer. Chaque mise à jour du flux de données via `BehaviorSubject` ou `Observable` entraîne un *change detection*. Avec les Signaux, Angular peut gérer la réactivité de façon plus efficace en réduisant ces cycles.

## *Exemple de Migration*

Dans cet exemple, nous allons simuler un service de données en utilisant d’abord RxJS, puis les Signaux Angular.

### *Service avec RxJS*

Voici un service qui utilise un `BehaviorSubject` pour émettre des valeurs mises à jour toutes les secondes.

```typescript
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
  providedIn: 'root',
})
export class DataService {
  private dataSubject = new BehaviorSubject<number>(0);
  data$ = this.dataSubject.asObservable();
  constructor() {
    setInterval(() => {
      const newValue = this.dataSubject.value + 1;
      this.dataSubject.next(newValue);
    }, 1000);
  }
}
```

### *Service avec les Signaux Angular*

Avec les Signaux Angular, nous utilisons `computed` pour suivre l’état du signal sans générer de cycles inutiles.

```typescript
import { Injectable, signal } from '@angular/core';
@Injectable({
  providedIn: 'root',
})
export class DataService {
  private dataSignal = signal(0);
  constructor() {
    setInterval(() => {
      this.dataSignal.set(this.dataSignal() + 1);
    }, 1000);
  }
  get data() {
    return this.dataSignal;
  }
}
```

Ici, `dataSignal` est un signal réactif, qui optimise le déclenchement des changements sans nécessiter d'observables.

## *Démonstration : RxJS vs Signaux Angular*

Pour illustrer les différences, nous allons créer deux composants Angular. Chaque composant affichera un compteur de cycles de *change detection*.

### *Composant avec RxJS*

```typescript
import { Component, OnInit, OnDestroy, DoCheck } from '@angular/core';
import { DataService } from './data.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-rxjs-demo',
  template: `
    <h3>Composant avec RxJS</h3>
    <p>Valeur : {{ value }}</p>
    <p>Nombre de cycles de Change Detection : {{ changeDetectionCount }}</p>
  `,
})
export class RxjsDemoComponent implements OnInit, OnDestroy, DoCheck {
  value = 0;
  changeDetectionCount = 0;
  private subscription!: Subscription;
  constructor(private dataService: DataService) {}
  ngOnInit() {
    this.subscription = this.dataService.data$.subscribe((data) => {
      this.value = data;
    });
  }
  ngDoCheck() {
    this.changeDetectionCount++;
  }
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}
```

### *Composant avec les Signaux Angular*

```typescript
@Component({
  selector: 'app-signals-demo',
  template: `
    <h3>Composant avec Signaux</h3>
    <p>Valeur : {{ value() }}</p>
    <p>Nombre de cycles de Change Detection : {{ changeDetectionCount }}</p>
  `,
})
export class SignalsDemoComponent implements DoCheck {
  value = this.dataService.data;
  changeDetectionCount = 0;
  constructor(private dataService: DataService) {}
  ngDoCheck() {
    this.changeDetectionCount++;
  }
}
```

## *Résultats de la Démonstration*

Avec ces deux composants en place, exécutons-les pour observer le nombre de cycles de *change detection* :

Technologie / Nombre de Cycles de Change Detection

**RxJS:** 10 / **Signaux Angular:** 5

## *Analyse*

- **RxJS** déclenche un cycle de changement pour chaque nouvelle valeur.
- **Signaux Angular** optimise les cycles de détection, ne déclenchant que les changements nécessaires.

## *Conclusion*

Cet exemple montre comment les Signaux Angular permettent de réduire la fréquence des cycles de *change detection* par rapport à RxJS. En intégrant cette nouvelle fonctionnalité, Angular facilite la création d’applications plus performantes, en réduisant la charge de travail inutile sur le moteur de changement de détection.