Vous êtes sur la page 1sur 19

Angular : directive

Achref El Mouelhi

Docteur de l’université d’Aix-Marseille


Chercheur en programmation par contrainte (IA)
Ingénieur en génie logiciel

elmouelhi.achref@gmail.com

H & H: Research and Training 1 / 13


Angular
On a utilisé deux types de directives Angular

directives structurelles : ayant comme but de modifier le DOM


(ngIf, ngFor...)

H I ©
directives attribute : ayant comme but de modifier l’apparence ou
U EL
le comportement d’un élément (ngStyle, ngClass...)
O
f ELM
ch r e
©A

H & H: Research and Training 2 / 13


Angular
On a utilisé deux types de directives Angular

directives structurelles : ayant comme but de modifier le DOM


(ngIf, ngFor...)

H I ©
directives attribute : ayant comme but de modifier l’apparence ou
U EL
le comportement d’un élément (ngStyle, ngClass...)
O
f E LM
crc
Il est possible deA éer
r e
hsa propre directive attribute
©
Il faut créer une classe TypeScript avec le décorateur
@Directive ayant une propriété selector
La valeur de la propriété selector peut-être utilisée comme
attribut de balise dans les templates

H & H: Research and Training 2 / 13


Angular

Pour créer une directive


ng generate directive nom-directive

H I ©
UEL
O
f ELM
ch r e
©A

H & H: Research and Training 3 / 13


Angular

Pour créer une directive


ng generate directive nom-directive

H I ©
Ou le raccourci UEL
O
ng g d nom-directive
f ELM
ch r e
©A

H & H: Research and Training 3 / 13


Angular

Pour créer une directive


ng generate directive nom-directive

H I ©
Ou le raccourci UEL
O
ng g d nom-directive
f ELM
ch r e
© A
Exemple : définissons une directive (mouvement) qui modifier
l’apparence d’un élément quand la souris passe au dessus
ng g d directives/mouvement

H & H: Research and Training 3 / 13


Angular
Le résultat

CREATE src/app/directives/mouvement.directive.spec.ts (236


bytes)
CREATE src/app/directives/mouvement.directive.ts (147 bytes)
UPDATE src/app/app.module.ts (1035 bytes)
H I ©
U EL
O
f ELM
Explication
ch r e
©A
: deux fichiers générés

mouvement.directive.spec.ts
mouvement.directive.ts
déclaration de la directive dans app.module.ts

H & H: Research and Training 4 / 13


Angular

Contenu du mouvement.directive.ts
import { Directive } from ’@angular/core’;

H I ©
@Directive({
UEL
selector: ’[appMouvement]’
O
})
f ELM
export class MouvementDirective {
ch r e
©A
constructor() { }

H & H: Research and Training 5 / 13


Angular

Pour référencer les éléments concernés par la directive, on fait


une injection de dépendance de ElementRef
import { Directive, ElementRef } from ’@angular/core
’;
H I ©
UEL
@Directive({
O
selector: ’[appMouvement]’
f ELM
})
ch
export class MouvementDirective {r e
© A
constructor(private el: ElementRef) {
}

H & H: Research and Training 6 / 13


Angular
Pour changer la couleur de fond d’un élément utilisant cette directive

import { Directive, ElementRef } from ’@angular/core’;

@Directive({
selector: ’[appMouvement]’
})
H I ©
export class MouvementDirective {
U EL
O
f ELM
constructor(private el: ElementRef) {
el.nativeElement.style.backgroundColor = ’red’;
}
ch r e
} ©A

H & H: Research and Training 7 / 13


Angular
Pour changer la couleur de fond d’un élément utilisant cette directive

import { Directive, ElementRef } from ’@angular/core’;

@Directive({
selector: ’[appMouvement]’
})
H I ©
export class MouvementDirective {
U EL
O
f ELM
constructor(private el: ElementRef) {
el.nativeElement.style.backgroundColor = ’red’;
}
ch r e
} ©A
Pour tester, ajouter le code suivant dans app.component.html (par exemple)

<p appMouvement> mon texte </p>

H & H: Research and Training 7 / 13


Angular

Hypothèse

I ©
Si on voulait modifier la couleur de fond d’un élément s’il est
H
survolé
U EL
O
f ELM
Et remettre sa couleur à la sortie du curseur

ch r e
Il faut attacher des évènements aux changements de couleur

©A
On peut utiliser un décorateur Angular : @HostListener qui
prend comme paramètre le nom d’un évènement

H & H: Research and Training 8 / 13


Solution
import { Directive, ElementRef, HostListener } from ’@angular/
core’;

@Directive({
selector: ’[appMouvement]’
})
export class MouvementDirective {
H I ©
EL
U}
constructor(private el: ElementRef) {
M O
f EL
@HostListener(’mouseenter’) onMouseEnter() {

ch r e
this.changerCouleur(’skyblue’);

©A
}
@HostListener(’mouseleave’) onMouseLeave() {
this.changerCouleur(’white’);
}
changerCouleur(couleur: string) {
this.el.nativeElement.style.backgroundColor = couleur;
}
}

H & H: Research and Training 9 / 13


Angular
Hypothèse

Si on voulait que la couleur affichée soit passée comme valeur de notre


attribut appMouvement

On peut utiliser @Input


H I ©
U EL
O
f ELM
ch r e
©A

H & H: Research and Training 10 / 13


Angular
Hypothèse

Si on voulait que la couleur affichée soit passée comme valeur de notre


attribut appMouvement

On peut utiliser @Input


H I ©
U EL
O
f ELM
Par exemple
ch r e
©A
<p [appMouvement]="’red’"> mon texte </p>

H & H: Research and Training 10 / 13


Angular
Hypothèse

Si on voulait que la couleur affichée soit passée comme valeur de notre


attribut appMouvement

On peut utiliser @Input


H I ©
U EL
O
f ELM
Par exemple
ch r e
©A
<p [appMouvement]="’red’"> mon texte </p>

Dans ce cas, maCouleur est un attribut défini dans la classe associée


<p [appMouvement]="maCouleur"> mon texte </p>

H & H: Research and Training 10 / 13


Angular
Solution
import { Directive, ElementRef, HostListener, Input } from ’@angular/
core’;

@Directive({
selector: ’[appMouvement]’
})
H I ©
EL
export class MouvementDirective {

@Input(’appMouvement’) couleur: string;


O U
f ELM
constructor(private el: ElementRef) { }

ch r e
©A
@HostListener(’mouseenter’) onMouseEnter() {
this.changerCouleur(this.couleur);
}
@HostListener(’mouseleave’) onMouseLeave() {
this.changerCouleur(’white’);
}
changerCouleur(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
}
H & H: Research and Training 11 / 13
On peut utiliser le décorateur @HostBinding et lui passer le nom d’un attribut HTML de
l’élément ayant l’attribut que l’on souhaite modifier
import { Directive, HostListener, Input, HostBinding } from ’@angular/
core’;

@Directive({
selector: ’[appMouvement]’
})
export class MouvementDirective {
H I ©
@HostBinding(’style.backgroundColor’) background;
U EL
@Input(’appMouvement’) couleur: string;
O
constructor() { }

f E LM
ch r e
@HostListener(’mouseenter’) onMouseEnter() {

©A
this.changerCouleur(this.couleur);
}

@HostListener(’mouseleave’) onMouseLeave() {
this.changerCouleur(’white’);
}
changerCouleur(color: string) {
this.background = color;
}
}
H & H: Research and Training 12 / 13
Angular
Exercice

Considérons un composant peintre dont la classe associée a un attribut


couleurs = [’red’, ’skyblue’, ’gray’, ’green’, ’yellow’,
’teal’].

H I ©
Créez un composant fils nommé peinture.
U EL
O
LM
Le composant peintre a un attribut value recevant sa valeur du tableau
composant parent peintre.

r e f E
ch
Le nombre de composants peinture = taille du tableau couleurs.

©A
Chaque composant peinture affiche le nom de la couleur qu’il a reçu de son
parent.

Créez une directive pinceau qui modifie la couleur de fond des composants
peinture survolés. La couleur de fond est la valeur de l’attribut value du
composant peinture survolé.

H & H: Research and Training 13 / 13