Blog ENI : Toute la veille numérique !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. Angular
  3. Les directives
Extrait - Angular Développez vos applications web avec le framework JavaScript de Google (3e édition)
Extraits du livre
Angular Développez vos applications web avec le framework JavaScript de Google (3e édition) Revenir à la page d'achat du livre

Les directives

Introduction

Ce chapitre aborde les comportements des directives les plus utilisées. Les directives d’attributs et structurelles, leurs spécificités et la manière de les créer sont également au programme.

Qu’est-ce qu’une directive ?

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...

Les directives d’attribut

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 à...

Les directives structurelles

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...