45. Ajouter un paramètre à notre directive

46. Réorganiser notre code

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

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s