Tout savoir sur les Signals Input d’Angular

Avant de se lancer

Vous avez la possibilité de suivre notre formation Angular durant laquelle vous apprendrez à développer des applications Web interactives écrites en TypeScript, à créer vos propres composants réutilisables et à maitriser les différentes facettes de la technologie.

Si vous avez déjà de l’expérience sur Angular, nous vous proposons notre formation Angular Avancé. Vous apprendrez à résoudre des problèmes d’orchestration sur RxJS, l’amélioration des performances de votre site Web ou développer et gérer des composants Angular.

L’équipe Ambient IT

Introduction

Qu’est-ce que les Signals Input ?

Angular est connu pour sa capacité à créer des applications dynamiques et performantes, en utilisant ce concept qui permet de communiquer des données entre composants. Ces Inputs sont essentiels pour la création de composants enfants dynamiques et réactifs. Cependant, avec l’arrivée des Signals Input, Angular enrichit son arsenal et offre une alternative réactive aux décorateurs @Input() classiques.

Les fondamentaux des Inputs

Comment définir un Input dans un composant Angular ?

Définir un Input dans un composant Angular est relativement simple. Avec la mise en place de cette nouveauté, il n’est plus nécessaire d’utiliser le décorateur @Input(). Désormais, l’accès à une syntaxe est encore plus expressive :

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

@Component({…})
export class MyComp {
  // optional inputs
  firstName = input<string>();
  age = input(0);

  // required inputs
  lastName = input.required<string>();
}

Quels rôles jouent les inputs ?

Les Inputs jouent plusieurs rôles :

• Liaison entre composant parent et composant enfant

En effet, ils sont le moyen par lequel un composant parent peut transmettre des données à un composant enfant. Cela va permettre de créer des composants réutilisables et de bâtir des applications très puissantes et bien structurées.

• Présent dans le cycle de vie des composants

Ils jouent un rôle clé dans le cycle de vie des composants Angular. Ils sont constamment utilisés pour initialiser des données ou déclencher des actions dans un composant enfant lorsque les données parentes changent.

Assurer la qualité des données grâce aux inputs

La catégorisation des Inputs est cruciale pour maintenir la qualité et la prévisibilité des données dans une application. Grâce aux Signals Input, Angular renforce la sûreté de la catégorie de l’Input. Ainsi, cela conduit à définir clairement le type de données attendu par un Input.

La liaison de données

la liaison de données unidirectionnelle

La liaison de données unidirectionnelle avec @Input() permet au composant parent de passer des données au composant enfant sans que ce dernier puisse directement modifier les données, ce qui assure un flux de données prévisible et facile à comprendre. Il est également possible de passer des données complexes au composant enfant. Pour cela, il suffit d’utiliser un objet ou une structure de données qui encapsule les informations.

Par ailleurs, il existe des pratiques pour la liaison de données qui incluent :

• L’utilisation de types clairs
• La définition de valeur par défaut
• L’utilisation judicieuse des changements de détection pour optimiser les performances de l’application

Gestion des changements

La gestion des changements des Inputs est cruciale pour maintenir la cohérence des données et l’interface utilisateur à jour avec les dernières informations. Cela permet notamment d’optimiser les performances en évitant des mises à jour inutiles. De plus, les stratégies de détection des changements, telles que OnPush, déterminent comment et quand Angular vérifie et met à jour les composants. Les Signals Input sont conçus pour fonctionner de manière optimale avec OnPush, améliorant ainsi les performances de l’application.

Auparavant, pour intercepter les changements d’inputs, on utilisait la méthode ngOnChanges grâce au @Input(). Maintenant, vous pouvez d’utiliser effect() pour réagir de manière réactive aux changements.

Valeurs par défaut et Inputs optionnels

Pour définir des valeurs par défaut pour les Inputs, il suffit d’uniquement fournir une valeur initiale lors de la déclaration de l’Input. Avec les Signals Input, une valeur par défaut peut être spécifiée ou undefined.

firstName = input<string>(); // default value : undefined
age = input(0); // explicit default value : 0

Par défaut, un Input est optionnel. Si aucune valeur n’est fournie, Angular utilisera undefined comme valeur initiale. Par conséquent, cela simplifie la gestion des Inputs optionnels et des valeurs non fournies.

Tests et Inputs dans Angular

Comment tester les composants Angular avec des Inputs ?

Pour les tests des composants Angular avec des Inputs, il vous faudra fournir des valeurs d’Input lors de la configuration du test et de vérifier que le composant ne présente pas d’erreur. Les Signals Input peuvent particulièrement être avantageux dans les tests grâce à leur réactivité et leur prévisibilité.

Les cas de test courants pour les Inputs vont inclure :

• La vérification de la réaction du composant aux différentes valeurs d’Input
• Le test des valeurs par défaut
• La gestion des changements d’Inputs

Bonnes pratiques et patterns avec les Inputs

Quels sont les patterns à utiliser et à Éviter ?

Bons patterns	Mauvais patterns
Encapsulation des données complexes dans des objets	Manipulation directe des données d’Input par le composant enfant
Utilisation de types explicites	Omission de la gestion des changements d’Input
Surveillance réactive des changements d’Input avec des effets	Surcharge des Inputs avec de nombreuses logiques complexes

Les Inputs dans les formulaires dynamiques

Les formulaires dynamiques ?

Ces Inputs peuvent être utilisés pour construire des formulaires dynamiques en passant des structures de données qui décrivent les différents champs du formulaire. Avec les Signals Input, on peut également réagir de façon réactive aux changements de l’état du formulaire. La validation des données avec les Inputs dans les formulaires peut être gérée en utilisant les différents mécanismes de validation, comme les Validators, et en dérivant des états de validation avec des signaux réactifs.

Conclusion

Bien que les Signals Input proposent de nombreux avantages, ils ont aussi leurs limites, notamment la nécessité de comprendre le modèle de réactivité d’Angular et de s’assurer que les composants consommateurs sont compatibles avec cette approche. Les Inputs vont façonner les interactions au sein des applications Angular en vous garantissant une méthode plus réactive et performante pour la communication des données entre composants.