La stratégie OnPush dans Angular

Dans Angular, la stratégie OnPush est une stratégie de mise à jour de composant qui indique au moteur de change detection de mettre à jour un composant uniquement lorsque des propriétés d'entrée ou des événements d'entrée sont déclenchés. Cela peut être utile lorsque vous travaillez avec des composants qui affichent des données qui ne changent pas fréquemment, car cela permet de réduire le nombre de cycles de change detection nécessaires, ce qui peut améliorer les performances de l'application.

Pour utiliser la stratégie OnPush dans un composant Angular, vous devez définir la propriété changeDetection de la décoration du composant sur ChangeDetectionStrategy.OnPush. Voici un exemple de code qui montre comment définir la stratégie OnPush sur un composant Angular simple :

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true
})
export class MyComponentComponent {
  // composant code goes here
}

Il est également possible de définir la stratégie de mise à jour de change detection à l'aide d'une directive de type ChangeDetectorRef. Cela peut être utile lorsque vous souhaitez mettre à jour un composant de manière explicite, plutôt que de dépendre des événements d'entrée et des propriétés d'entrée pour déclencher la mise à jour. Voici un exemple de code qui montre comment utiliser la directive ChangeDetectorRef pour mettre à jour un composant avec la stratégie OnPush :

import { Component, ChangeDetectorRef, ChangeDetectionStrategy, inject } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true
})
export class MyComponentComponent {
  private cd = inject(ChangeDetectorRef)

  updateComponent() {
    this.cd.markForCheck();
  }
}

En utilisant la stratégie OnPush, vous pouvez améliorer les performances de votre application en réduisant le nombre de cycles de change detection nécessaires. Cependant, il est important de noter que cela peut rendre votre code un peu plus complexe à écrire et à comprendre, car vous devez être plus explicite sur les moments où vous souhaitez mettre à jour votre composant.

L’intérêt de markForCheck ?

markForCheck() est une méthode de la classe ChangeDetectorRef dans Angular qui permet de marquer un composant ou un groupe de composants pour une vérification ultérieure par le moteur de change detection. Cela signifie que, même si la stratégie de mise à jour de change detection d'un composant est définie sur OnPush, le moteur de change detection vérifiera quand même les valeurs des propriétés du composant lors de la prochaine itération de change detection.

L'utilisation de markForCheck() peut être utile dans les cas où vous avez mis à jour des données dans un composant qui ne déclenchent pas normalement une mise à jour de change detection, par exemple en cas de modification de données en arrière-plan qui ne sont pas liées à une entrée de l'utilisateur. Cela peut être particulièrement utile lorsque vous travaillez avec des composants qui affichent des données qui ne changent pas fréquemment, car cela vous permet de mettre à jour le composant de manière explicite lorsque les données ont été modifiées, plutôt que de dépendre d'un événement d'entrée ou d'une propriété d'entrée pour déclencher la mise à jour.

Voici un exemple de code qui montre comment utiliser markForCheck() pour mettre à jour un composant avec la stratégie OnPush :

import { Component, ChangeDetectorRef, ChangeDetectionStrategy, inject } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponentComponent {
  private cd = inject(ChangeDetectorRef)
  data: any;

  updateData() {
    // fetch data from backend
    // this.data = fetchData();
    this.cd.markForCheck();
  }
}

Dans cet exemple, la méthode updateData() est appelée lorsque vous souhaitez mettre à jour les données du composant avec de nouvelles données chargées à partir du backend. La méthode markForCheck() est ensuite appelée pour indiquer au moteur de change detection que le composant doit être vérifié lors de la prochaine itération de change detection, même si la stratégie de mise à jour de change detection est définie sur OnPush.