Pour terminer le développement de notre directive, je vous propose de remplacer les valeurs codées « en dur », par des propriétés:

  • initialColor: la couleur initiale affiché au chargement de la page.
  • defaultColor: la couleur par défaut si aucune couleur de bordure n’est précisée.
  • defaultHeight: la hauteur par défaut du cadre pour la bordure.

Le code ce que j’obtiens de mon côté est dans la correction de ce chapitre.

Vous pouvez bien sûr continuer à vous entrainer en améliorant cette directive. Par exemple, en ajoutant des propriétés d’entrées pour paramétrer la largeur ou le type de la bordure : pointillé, double trait… ou tout ce qui vous passe par la tête ! Faites preuve d’imagination. 😀

47. Conclusion

2 commentaires

  1. Salut,

    Au départ je me demandais à quoi pouvait servir une directive. Si c’est simplement pour ajouter une bordure au hover, il suffit de le faire en css n’est-ce pas ?

    Ici je comprends qu’une directive permet d’ajouter des paramètres dynamiques à nos templates ce qui peut-être très utile.

    Le plus compliqué en réalité est de savoir quand il faut faire ça dans une directive, et quand le mettre dans notre composant. Car en réalité la différence entre les deux reste assez difficile à définir. Tu as peut-être un conseil à nous donner pour savoir quand agir sur le component ou quand il faut écrire une directive ?

    Merci pour ton cours en tout cas que je suis avec passion !

    1. Salut,
      Je viens de lire ton commentaire, et je vais répondre à toutes tes questions. 🙂
      Concernant l’ajout de la bordure, il est en effet possible d’utiliser une simple règle CSS au survol, à la place. L’idée est pédagogique, montrer comment créer une directive personnalisée, lui ajouter des paramètre, et l’appliquer sur un de nos composants.

      Concernant le découpage de ton code dans une directive à part, c’est en effet une très bonne question, et il n’y a pas forcément de réponse meilleure qu’une autre. Ce que je te recommande, c’est de séparer ton code dans une directive spécifique, à partir du moment où au moins deux composants ont le même besoin. Sinon, tu peux mettre directement le code du comportement en question directement dans ton composant, à moins que tu souhaite anticiper directement.

      Voilà, j’espère que mes explications sont claires. 🙂
      Si tu as une question ou une remarque, n’hésites pas à me demander, je te répondrai avec plaisir.

      Bon apprentissage pour la suite,
      Simon.

Laisser un commentaire