Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Angular : directive Achref El Mouelhi Docteur de l’universit´ e d’Aix-Marseille

Angular : directive Achref El Mouelhi Docteur de l’universit´ e d’Aix-Marseille Chercheur en programmation par contrainte (IA) Ing´ enieur en g´ enie logiciel elmouelhi.achref@gmail.com H & H: Research and Training 1 / 13 © Achref EL MOUELHI © Angular On a utilis´ e deux types de directives Angular directives structurelles : ayant comme but de modiﬁer le DOM (ngIf, ngFor...) directives attribute : ayant comme but de modiﬁer l’apparence ou le comportement d’un ´ el´ ement (ngStyle, ngClass...) H & H: Research and Training 2 / 13 © Achref EL MOUELHI © Angular On a utilis´ e deux types de directives Angular directives structurelles : ayant comme but de modiﬁer le DOM (ngIf, ngFor...) directives attribute : ayant comme but de modiﬁer l’apparence ou le comportement d’un ´ el´ ement (ngStyle, ngClass...) Il est possible de cr´ eer sa propre directive attribute Il faut cr´ eer une classe TypeScript avec le d´ ecorateur @Directive ayant une propri´ et´ e selector La valeur de la propri´ et´ e selector peut-ˆ etre utilis´ ee comme attribut de balise dans les templates H & H: Research and Training 2 / 13 © Achref EL MOUELHI © Angular Pour cr´ eer une directive ng generate directive nom-directive H & H: Research and Training 3 / 13 © Achref EL MOUELHI © Angular Pour cr´ eer une directive ng generate directive nom-directive Ou le raccourci ng g d nom-directive H & H: Research and Training 3 / 13 © Achref EL MOUELHI © Angular Pour cr´ eer une directive ng generate directive nom-directive Ou le raccourci ng g d nom-directive Exemple : d´ eﬁnissons une directive (mouvement) qui modiﬁer l’apparence d’un ´ el´ ement quand la souris passe au dessus ng g d directives/mouvement H & H: Research and Training 3 / 13 © Achref EL MOUELHI © Angular Le r´ esultat 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) Explication : deux ﬁchiers g´ en´ er´ es mouvement.directive.spec.ts mouvement.directive.ts d´ eclaration de la directive dans app.module.ts H & H: Research and Training 4 / 13 © Achref EL MOUELHI © Angular Contenu du mouvement.directive.ts import { Directive } from ’@angular/core’; @Directive({ selector: ’[appMouvement]’ }) export class MouvementDirective { constructor() { } } H & H: Research and Training 5 / 13 © Achref EL MOUELHI © Angular Pour r´ ef´ erencer les ´ el´ ements concern´ es par la directive, on fait une injection de d´ ependance de ElementRef import { Directive, ElementRef } from ’@angular/core ’; @Directive({ selector: ’[appMouvement]’ }) export class MouvementDirective { constructor(private el: ElementRef) { } } H & H: Research and Training 6 / 13 © Achref EL MOUELHI © Angular Pour changer la couleur de fond d’un ´ el´ ement utilisant cette directive import { Directive, ElementRef } from ’@angular/core’; @Directive({ selector: ’[appMouvement]’ }) export class MouvementDirective { constructor(private el: ElementRef) { el.nativeElement.style.backgroundColor = ’red’; } } H & H: Research and Training 7 / 13 © Achref EL MOUELHI © Angular Pour changer la couleur de fond d’un ´ el´ ement utilisant cette directive import { Directive, ElementRef } from ’@angular/core’; @Directive({ selector: ’[appMouvement]’ }) export class MouvementDirective { constructor(private el: ElementRef) { el.nativeElement.style.backgroundColor = ’red’; } } Pour tester, ajouter le code suivant dans app.component.html (par exemple) mon texte H & H: Research and Training 7 / 13 © Achref EL MOUELHI © Angular Hypoth` ese Si on voulait modiﬁer la couleur de fond d’un ´ el´ ement s’il est survol´ e Et remettre sa couleur ` a la sortie du curseur Il faut attacher des ´ ev` enements aux changements de couleur On peut utiliser un d´ ecorateur Angular : @HostListener qui prend comme param` etre le nom d’un ´ ev` enement H & H: Research and Training 8 / 13 © Achref EL MOUELHI © Solution import { Directive, ElementRef, HostListener } from ’@angular/ core’; @Directive({ selector: ’[appMouvement]’ }) export class MouvementDirective { constructor(private el: ElementRef) { } @HostListener(’mouseenter’) onMouseEnter() { this.changerCouleur(’skyblue’); } @HostListener(’mouseleave’) onMouseLeave() { this.changerCouleur(’white’); } changerCouleur(couleur: string) { this.el.nativeElement.style.backgroundColor = couleur; } } H & H: Research and Training 9 / 13 © Achref EL MOUELHI © Angular Hypoth` ese Si on voulait que la couleur afﬁch´ ee soit pass´ ee comme valeur de notre attribut appMouvement On peut utiliser @Input H & H: Research and Training 10 / 13 © Achref EL MOUELHI © Angular Hypoth` ese Si on voulait que la couleur afﬁch´ ee soit pass´ ee comme valeur de notre attribut appMouvement On peut utiliser @Input Par exemple mon texte H & H: Research and Training 10 / 13 © Achref EL MOUELHI © Angular Hypoth` ese Si on voulait que la couleur afﬁch´ ee soit pass´ ee comme valeur de notre attribut appMouvement On peut utiliser @Input Par exemple mon texte Dans ce cas, maCouleur est un attribut d´ eﬁni dans la classe associ´ ee mon texte H & H: Research and Training 10 / 13 © Achref EL MOUELHI © Angular Solution import { Directive, ElementRef, HostListener, Input } from ’@angular/ core’; @Directive({ selector: ’[appMouvement]’ }) export class MouvementDirective { @Input(’appMouvement’) couleur: string; constructor(private el: ElementRef) { } @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 © Achref EL MOUELHI © On peut utiliser le d´ ecorateur @HostBinding et lui passer le nom d’un attribut HTML de l’´ el´ ement ayant l’attribut que l’on souhaite modiﬁer import { Directive, HostListener, Input, HostBinding } from ’@angular/ core’; @Directive({ selector: ’[appMouvement]’ }) export class MouvementDirective { @HostBinding(’style.backgroundColor’) background; @Input(’appMouvement’) couleur: string; constructor() { } @HostListener(’mouseenter’) onMouseEnter() { this.changerCouleur(this.couleur); } @HostListener(’mouseleave’) onMouseLeave() { this.changerCouleur(’white’); } changerCouleur(color: string) { this.background = color; } } H & H: Research and Training 12 / 13 © Achref EL MOUELHI © Angular Exercice Consid´ erons un composant peintre dont la classe associ´ ee a un attribut couleurs = [’red’, ’skyblue’, ’gray’, ’green’, ’yellow’, ’teal’]. Cr´ eez un composant ﬁls nomm´ e peinture. Le composant peintre a un attribut value recevant sa valeur du tableau composant parent peintre. Le nombre de composants peinture = taille du tableau couleurs. Chaque composant peinture afﬁche le nom de la couleur qu’il a rec ¸u de son parent. Cr´ eez une directive pinceau qui modiﬁe la couleur de fond des composants peinture survol´ es. La couleur de fond est la valeur de l’attribut value du composant peinture survol´ e. H & H: Research and Training 13 / 13 uploads/Voyage/ cours-angular-directive.pdf