Et si je vous disais qu’on peut réinventer les échanges entre composants en Angular ?
Avec l’arrivée des Signals dans Angular, on explore de nouvelles façons de gérer la réactivité. Mais saviez-vous qu’ils ne se limitent pas à simplifier les états ?
Voici une fonctionnalité qui change tout : les Signal Inputs.
Mais qu’est-ce que c’est ?
Les Signal Inputs sont une alternative réactive à l’emblématique @Input(). Ils permettent à un composant enfant de recevoir des données d’un parent, mais avec des capacités étendues :
• Plus réactifs
• Plus performants
• Faciles à transformer avant leur utilisation.
Deux approches, une flexibilité totale
1. Optional Input : Par défaut, un Signal Input peut être optionnel, ce qui permet au composant enfant de gérer les absences sans erreur.
@Component({...})
export class MyComp {
public readonly name = input();
}
2. Required Input : Si vous voulez rendre l’entrée obligatoire, Angular vous le permet :
@Component({...})
export class MyComp {
public readonly name = input.required();
}
Pourquoi les adopter ?
• Transformez les données facilement (comme un pipe).
class MyComp {
public readonly disabled = input(false, {
transform: (value: boolean|string) => typeof value === 'string' ? value === '' : value,
});
}
• Réduisez les conflits de noms avec des alias.
@Component({...})
export class MyComp {
public name = input(‘Emma’, { alias: ‘customerName’ });
}
• Optimisez vos performances grâce à la détection automatique des changements (parfait pour les composants OnPush).
Une vraie révolution pour vos composants
Les Signal Inputs marquent un tournant en Angular : ils ne remplacent pas simplement @Input(), mais offrent une manière plus réactive et flexible de gérer les données.
Pour plus d’info: https://lnkd.in/ev3JFfJz
Et vous, comment imaginez-vous les intégrer dans vos prochains projets Angular ? 🚀
#Angular #SignalInputs #Réactivité #InnovationTech