Les directives

1. Introduction

Une directive est un élément du framework qui va interagir directement avec le DOM de notre page HTML. Elles permettent donc d’associer à un élément HTML un comportement JavaScript. Il existe trois types de directives.

Premièrement, les directives d’attribut. Celles-ci ne modifient pas l’arborescence du DOM. Autrement dit, elles ne vont ni créer ni supprimer des éléments HTML, mais vont agir sur les attributs et les propriétés des balises HTML existantes. Elles sont notamment utilisées pour modifier l’apparence (en modifiant le style) ou le comportement (en modifiant les handlers) d’un élément existant.

Deuxièmement, les directives structurelles. Ces directives, en opposition aux directives d’attribut, modifient directement l’arborescence du DOM HTML. Elles peuvent donc ajouter...

1. Créer une directive d’attribut

Afin de créer une directive d’attribut, il faut créer une classe et lui ajouter le décorateur @Directive. Ce décorateur prend en paramètre un sélecteur. C’est ce sélecteur CSS qui sera utilisé sur les balises HTML sur lesquelles la directive sera appliquée.

import { Directive } from '@angular/core'; 
 
@Directive({ 
  selector: '[appBordure]' 
}) 
export class BordureDirective { 
 constructor() { } 
} 

Dans l’exemple précédent, les crochets qui sont utilisés dans le sélecteur servent à préciser que c’est un attribut qui est visé, comme en CSS.

Une fois ce décorateur appliqué, il faut injecter à notre constructeur la référence à...

1. La balise <template> et l’astérisque

Avant toutes choses, il est important de comprendre d’où vient l’astérisque qui préfixe généralement les directives structurelles. En effet, ces directives utilisent en réalité un template à appliquer. Par exemple, la directive NgIf va rendre ou non un template, NgFor va appliquer un template sur une liste d’objets, etc.

Pour utiliser NgIf, il faudrait en réalité utiliser la syntaxe suivante :

<template [ngIf]="condition"> 
  <div> 
    Cette div est rendue ou non en fonction de la condition NgIf 
  </div> 
</template> 

Cependant, cette syntaxe est un peu lourde. C’est pourquoi il existe un sucre syntaxique qui permet de l’alléger dans le framework. C’est l’astérisque qui préfixe l’attribut...