Nous allons voir comment créer une directive d’attribut pour notre application. Ce type de directive va nous permettre de changer l’apparence ou le comportement d’un élément.

Je vous propose de créer la directive BorderCardDirective, qui permettra d’ajouter une bordure de couleur sur les Pokémons de notre liste, lorsque l’utilisateur les survolera avec son curseur. Nous fixerons également une hauteur commune à tous les pokémons, afin que les éléments de notre liste soient toujours alignés. Voici ce que vous devriez obtenir:

directives-start
Notre directive en action ! 😉

Ici, je survole Salamèche avec mon curseur, mais comme j’ai réalisé l’image avec une capture d’écran, le curseur n’apparaît pas, c’est normal !

Pour commencer, nous savons qu’une directive d’attribut requiert au minimum une classe annotée avec @Directive.

Dans cette annotation, nous allons devoir préciser le sélecteur css qui permettra d’appliquer la directive sur nos éléments HTML. Dans la classe de notre directive nous décrirons le comportement souhaité. Créons donc une directive globale à notre application dans le dossier app, nommée border-card.directive.ts.

Tout d’abord, nous avons importé deux d’éléments depuis la librairie core d’Angular. Détaillons chacun de ces éléments:

  • Directives: Nous en avons besoin pour pouvoir utiliser l’annotation @Directive.
  • ElementRef: Cet objet représente l’élément du DOM sur lequel nous appliquons notre directive, nous y avons directement accès en paramètre du constructeur.

Ensuite nous passons un sélecteur css en paramètre de l’annotation @Directive. Notre directive s’appliquera donc à tous les éléments du DOM qui ont un attribut pkmnBorderCard, conformément au sélecteur que nous avons indiqué. Vous avez remarqué que nous avons bien mis le nom de l’attribut entre crochets dans le sélecteur. En effet, si nous avions simplement mis ceci …

@Directive({ selector: ‘pkmnBorderCard’}) // à ne pas faire !

export class BorderCardDirective { }

… alors notre directive se serait appliquée sur toutes les balises , ce qui n’a pas de sens, puisque dans ce cas ce ne serait pas une directive d’attribut mais un composant ! 😮

Lorsque nous avons choisi le nom de notre directive, nous avons préfixé border-card par pkmn. Il est recommandé de préfixer leur nom, afin d’éviter le risque de collisions avec des librairies tierces, ou avec des attributs HTML standard.

Par exemple, si votre application s’appelle AwesomeApp, utilisez le préfixe aa.

N’utilisez pas ng comme préfixe pour vos directives ! Ce préfixe est réservé par Angular. De plus, utilisé la syntaxe camelCase pour nommer vos directives.

Enfin on exporte la classe BorderCardDirective pour pouvoir utiliser cette directive dans nos composants !

Bref, récapitulons: Angular crée une nouvelle instance de notre directive à chaque fois qu’il détecte un élément HTML avec l’attribut pkmnBorderCard, et injecte l’élément du DOM et de quoi le modifier dans le constructeur de la directive. A partir de là, notre directive impose une bordure grise et une hauteur de 180px aux éléments HTML sur lesquels elle est rattachée, grâce aux méthodes setBorder et setHeight que nous avons définies.

43. Prendre en compte les actions de l’utilisateur

Laisser un commentaire