Angular: Directive ================== ![category](développement) ![tag](angular) Dans le framework angular il existe une notion de *Directive* Une directive est un *component* sans template Une directive permet de modifier dynamiquement le DOM. Il existe des - directives structurelles \*ngif - attributes directive Directive Structurelle ---------------------- Il en existe de nombreuses: ngFor, ngIf Attribute Directive ------------------- Exemple de création de directive qui: - permet lors du survole d'un élément de lui changer la couleur - qui prend en input deux valeurs création de notre creative ```bash ng generate directive highlight ``` Cela permet de créer le fichier ts qui va bien mais aussi de modifier le fichier app.module.ts pour importer la directive dans notre application notre fichier highlight.directive.ts ``` import { Directive, Renderer2, ElementRef, HostListener, Input, OnInit } from '@angular/core'; @Directive({ selector: '[appHighlight]' }) export class HighlightDirective implements OnInit { @Input('appHighlight') color: string[]; constructor(private _el: ElementRef, private _renderer: Renderer2) { } ngOnInit() { this._renderer.setStyle(this._el.nativeElement, 'color', this.color[1]); } @HostListener('mouseenter') onMouseEnter() { console.log("enter"), this._renderer.setStyle(this._el.nativeElement, 'color', this.color[0]); } @HostListener('mouseleave') onMouseLeave() { console.log("leave"), this._renderer.setStyle(this._el.nativeElement, 'color', this.color[1]); } } ``` Exemple d'utilisation dans un template d'un component ```html