Angular - 5.5-Attribution d'un alias aux propriétés personnalisées

Dans la leçon précédente, nous avons vu comment exposer une propriété d'un composant enfant à son parent grâce au décorateur @Input(). Angular permet d'aller un cran plus loin : donner un alias à cette propriété, pour que le nom utilisé à l'intérieur du composant soit différent de celui exposé à l'extérieur.

Pourquoi utiliser un alias

Imaginons un ServerElementComponent dont on veut une propriété interne nommée element — un nom court et logique dans le contexte du composant. Mais côté parent, ce nom serait ambigu : on préférerait écrire [srvElement]="..." pour préciser qu'il s'agit du server element. Sans alias, ce binding échoue : Angular cherche une propriété srvElement décorée @Input qui n'existe pas. La solution est de passer le nom externe en argument du décorateur :

@Input('srvElement') element: { type: string; name: string; content: string };

• à l'intérieur du composant, on continue d'utiliser this.element dans le code et le template ;
• à l'extérieur, le parent doit désormais binder via l'alias : [srvElement]="..." ;
• l'ancien nom [element] ne fonctionne plus une fois l'alias en place.

C'est un petit bonus pratique : il permet d'avoir un nom interne propre tout en exposant un nom plus explicite ou plus stable dans l'API publique du composant — utile pour publier des composants réutilisables sans casser leur usage en cas de renommage interne.