Pour le moment, notre directive pkmnBorderCard n’est pas personnalisable. A chaque utilisation, cette directive impose une couleur unique aux bordures. Je vous propose donc de paramétrer la couleur des bordures. De cette manière, à chaque fois que l’on appellera cette directive dans un template, il sera possible de préciser cette couleur.

Pour cela, nous devons préciser une propriété d’entrée pour notre directive, avec l’annotation @Input. Nous allons ajouter une propriété borderColor pour paramétrer la couleur des bordures.

Nous avons fait trois choses dans le code présenté dans la vidéo ci-dessous:

  • Importer l’annotation @Input depuis le paquet @angular/core, à la ligne 2.
  • Déclarer la propriété borderColor avec un alias. Les explications sur ce qu’est un alias se trouve un peu plus bas.
  • Utiliser cette propriété dans la méthode setBorder. On utilise l’opérateur logique OU (||) pour définir une valeur par défaut s’il n’y aucune couleur qui a été définie dans le template.

Ensuite, depuis votre template app.component.html, vous pouvez paramétrer votre directive.

Vous obtiendrez une bordure rouge au survol. C’est quand même plus sympathique de pouvoir choisir la couleur des bordures ! 😉

C’est quoi, un « alias » ?

En fait, il y a deux manières de déclarer une propriété d’entrée : avec ou sans alias.

@Input() pkmnBorderCard: string; // sans alias

@Input(‘pkmnBorderCard’) borderColor: string; // avec alias

Sans alias, car nous sommes obligé d’utiliser le nom de la directive pour nommer la propriéte. Or ce nom de propriété, pkmnBorderCard, n’est pas un nom adapté pour la couleur de nos bordures.

Heureusement, grâce à l’alias, vous pouvez nommer la propriété de la directive comme vous voulez, et utilisez ce nom ailleurs dans votre directive. Spécifiez simplement l’argument dans la directive @Input.

46. Réorganiser notre code

Laisser un commentaire