La détection des changements est un aspect fondamental d'Angular, responsable de l'identification et de la mise à jour des parties du DOM qui ont changé en réponse à des modifications de données ou à des interactions de l'utilisateur. Ce processus garantit que l'interface utilisateur reste cohérente avec les données sous-jacentes, améliorant ainsi l'expérience utilisateur et les performances des applications.

Le rôle de Zone.js

Historiquement, Angular s'est appuyé sur Zone.js pour son mécanisme de détection des changements. Zone.js est une bibliothèque JavaScript qui intercepte les opérations asynchrones, permettant à Angular de surveiller les modifications et de déclencher des mises à jour en conséquence. Cependant, l'inclusion de Zone.js peut ajouter une surcharge à l'application, en particulier dans les scénarios avec des activités asynchrones fréquentes.

Stratégies de détection des changements

Angular propose deux stratégies principales de détection des changements :

• Par défaut : La détection des modifications est déclenchée après chaque hook de cycle de vie, tel que ngOnInit ou ngAfterViewInit. Cette stratégie est simple mais peut conduire à des mises à jour inutiles du DOM, en particulier dans les applications volumineuses.

@Component({
  selector: 'app-my-component',
  template: `
    
{{ message }}
  `
})
export class MyComponent {
  message = 'Hello, world!';
}

Cette stratégie est plus facile à mettre en œuvre, car Angular gère automatiquement la plupart de la logique de détection des changements.
Le plus grand défi de cette stratégie de détection des changements était qu’elle conduisait à des mises à jour inutiles du DOM, ce qui devient critique pour les grandes applications.

• OnPush : La détection des modifications est déclenchée uniquement lorsque les propriétés d'entrée ou les observables asynchrones changent. Cette stratégie est plus performante pour les composants complexes avec des mises à jour fréquentes des données mais nécessite une gestion plus manuelle.

@Component({
  selector: 'app-my-component',
  template: `
    
{{ message }}
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  message = 'Hello, world!';
} 

Alors que la stratégie de détection des modifications onPush minimisait les manipulations inutiles du DOM, le plus grand défi de la stratégie de modification onPush était que les développeurs devaient effectuer davantage de gestion manuelle et déclencher les modifications manuellement. Ils ont dû gérer explicitement la détection des modifications avec changeDetectorRef.detectChanges() dans certains scénarios, par exemple lorsque les données changent indirectement ou lors de l'utilisation d'objets mutables.

Détection de changement angulaire 18 et hybride : une approche sans zone

Pour relever les défis associés à Zone.js, Angular 18 a introduit une fonctionnalité expérimentale connue sous le nom de détection de changement hybride. Cette approche vise à éliminer complètement Zone.js, en utilisant un nouveau mécanisme de détection des changements pour détecter les changements et manipuler le DOM.

Activation de la détection des changements hybrides :

Pour activer la détection hybride des changements, vous pouvez utiliser le code suivant :

bootstrapApplication(RootCmp,
{ providers: [provideExperimentalZonelessChangeDetection()] 
}
);

Cela déclenchera la détection des modifications dans les scénarios suivants :

• Un signal est mis à jour.
• changeDetectorRef.markForCheck() est appelé.
• Un observable abonné avec l'AsyncPipe reçoit une nouvelle valeur.
• Un composant est attaché ou détaché.
• Une entrée est définie.

Une fois la détection des changements hybrides activée, vous pouvez supprimer en toute sécurité Zone.js des polyfills de votre application.

 "polyfills": [
              "zone.js" //remove this line
            ],

Avantages de la détection hybride des changements

• Performances améliorées : L'élimination de Zone.js réduit les frais généraux, ce qui entraîne de meilleures performances, en particulier dans les applications comportant de nombreuses opérations asynchrones.

• Expérience de développement améliorée : La suppression de la détection manuelle des modifications simplifie le développement et réduit le risque d'erreurs.

• Taille d'application plus petite : Zone.js ajoute généralement environ 13 Ko à la taille de l'application. Le supprimer peut conduire à un ensemble plus petit.