Qu’est-ce qu’une directive personnalisée angulaire ?

Angular nous permet de créer deux types de directives personnalisées – attribut et structure – pour contrôler la façon dont les choses sont rendues dans le DOM ou pour modifier la disposition du DOM. Commençons avec ces outils dans Angular !

Angular est un framework basé sur des composants qui nous permet de créer des interfaces Web interactives pour les utilisateurs en composant des composants ensemble.

En plus des composants, Angular nous permet également de créer des directives. Les directives sont des classes qui nous permettent de modifier le comportement d’affichage des éléments dans les modèles de composants.

Angular nous permet de créer deux types de directives personnalisées. Nous pouvons créer des directives d’attribut ou de structure. Les directives d’attribut nous permettent de changer la façon dont les choses sont rendues dans le DOM. Les directives structurelles nous permettent de modifier la disposition du DOM en ajoutant ou en supprimant des éléments DOM.

Dans cet article, nous verrons comment créer des directives personnalisées et les utiliser dans notre code de composant.

Directives d’attribut

Nous pouvons créer une directive d’attribut pour manipuler l’arbre DOM. Cependant, nous devons garder à l’esprit que nous ne devons créer des directives pour manipuler le DOM que lorsqu’il n’y a pas d’autres choix disponibles.

Beaucoup de choses comme l’affichage conditionnel d’éléments, les effets de transition, etc. peuvent être faites avec d’autres parties du framework Angular.

Pour commencer, nous exécutons :

ng generate directive hover

pour créer les fichiers de hover directif.

Alors on devrait voir hover.directive.ts créé dans le app dossier. Dans app.module.tsnous devrions voir quelque chose comme :

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { HoverDirective } from "./hover.directive";

@NgModule({
  declarations: [AppComponent, HoverDirective],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

HoverDirective est dans le declarations tableau dans le AppModulece qui signifie qu’il peut être utilisé dans les composants du module.

Ensuite, en hover.directive.tsnous écrivons:

import { Directive, ElementRef, HostListener, Input } from "@angular/core";

@Directive({
  selector: "[appHover]",
})
export class HoverDirective {
  @Input() appHover = "";

  constructor(private el: ElementRef) {}

  @HostListener("mouseenter") onMouseEnter() {
    this.highlight(this.appHover);
  }

  @HostListener("mouseleave") onMouseLeave() {
    this.highlight("");
  }

  private highlight(color: string) {
    this.el.nativeElement.style.color = color;
  }
}

La selector La propriété est définie sur une chaîne que nous utilisons pour appliquer la directive. Par conséquent, nous appliquons la directive avec le [appHover] attribut dans notre modèle de composant.

@Input() laisse notre directive prendre un argument.

Puis nous ajoutons le HostListener écouter le mouseenter et mouseleave événements sur le DOM. Les méthodes seront appelées lorsque l’événement sera déclenché sur l’élément auquel nous avons appliqué la directive.

Dans onMouseEnter et onMouseLeaveon appelle le this.highlight méthode pour appliquer la color Style CSS à l’élément auquel la directive s’applique.

this.el.nativeElement est l’élément DOM natif auquel nous avons appliqué la directive. Nous pouvons donc définir le style.color propriété à la color chaîne de caractères.

Nous appelons this.highlight avec this.appHover que nous obtiendrons de l’argument de la directive.

Ensuite, en app.component.htmlnous écrivons:

<p [appHover]="'orange'">hello world</p>

pour ajouter le appHover directive à la p élément. Et nous plaçons l’argument de la directive sur le 'orange' chaîne de caractères.

Par conséquent, this.appHoverla valeur est 'orange' pour ça appHover instance de la directive. En conséquence, nous devrions voir la couleur du texte devenir orange lorsque nous survolons le texte.

Et lorsque le pointeur de notre souris quitte le texte, nous verrons que le texte reprend sa couleur noire par défaut.

Directives structurelles

Un autre type de directive que nous pouvons ajouter dans Angular est les directives structurelles. Les directives structurelles nous permettent de modifier la disposition de l’arborescence DOM en ajoutant ou en supprimant des éléments.

Par exemple, nous exécutons :

ng generate directive if

pour créer le if directif.

Nous créons le if directive pour montrer quelque chose quand une condition est true.

Après cela, nous devrions obtenir quelque chose comme :

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { IfDirective } from "./if.directive";

@NgModule({
  declarations: [AppComponent, IfDirective],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

dans app.module.ts.

Puis dans app/if.directive.tsnous écrivons:

import { Directive, Input, TemplateRef, ViewContainerRef } from "@angular/core";

@Directive({
  selector: "[appIf]",
})
export class IfDirective {
  private hasView = false;

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) {}

  @Input() set appIf(condition: boolean) {
    if (condition && !this.hasView) {
      this.viewContainer.createEmbeddedView(this.templateRef);
      this.hasView = true;
    } else if (!condition && this.hasView) {
      this.viewContainer.clear();
      this.hasView = false;
    }
  }
}

pour ajouter le appIf poseur dans notre IfDirective classer. Dans celui-ci, nous vérifions si condition est true.

La condition est défini lorsque nous appliquons la directive à l’élément que nous voulons.

Si condition est true et this.hasView est falsealors nous voulons afficher l’élément qui a le appIf directive qui lui est appliquée puisque la condition pour montrer l’élément est true mais l’élément n’est pas dans le DOM.

Pour ajouter l’élément dans le DOM à l’endroit où il est référencé dans le modèle de composant, nous appelons this.viewContainer.createEmbeddedView avec this.templateRef.

this.templateRef contient l’élément auquel nous avons appliqué la directive.

viewContainer a l’élément conteneur pour le composant.

Nous fixons ensuite this.hasView à true afin que nous sachions que l’élément est rendu dans le DOM.

Si condition est false et this.hasView est truealors on pose this.hasView à false afin que nous sachions que l’élément n’est pas dans le DOM.

Nous supprimons l’élément avec la directive qui lui est appliquée du DOM avec this.viewContainer.clear();.

Ensuite, en app.component.tsnous écrivons:

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  condition: boolean = true;
}

pour ajouter le condition variable d’instance booléenne.

Puis nous écrivons :

<button (click)="condition = !condition">toggle</button>

<p *appIf="condition">hello world</p>

dans app.component.html pour faire le p affichage de l’élément uniquement avec condition est true.

Nous avons un bouton pour basculer le condition valeur entre true et false.

Ici, condition est la valeur de la condition paramètre dans le appIf méthode.

Par conséquent, lorsque nous cliquons sur le bouton bascule, nous voyons le p élément masquer et afficher quand condition est false et truerespectivement.

Conclusion

Les directives sont des classes qui nous permettent de modifier le comportement d’affichage des éléments dans les modèles de composants.

Angular nous permet de créer deux types de directives personnalisées : les directives d’attribut ou de structure. Les directives d’attribut nous permettent de changer la façon dont les choses sont rendues dans le DOM. La directive structurelle nous permet de modifier la disposition du DOM en ajoutant ou en supprimant des éléments DOM.

Nous pouvons facilement ajouter et supprimer des éléments avec les deux types de directives.

Et nous pouvons facilement manipuler les styles avec des directives d’attribut.

De plus, nous pouvons ajouter des écouteurs d’événements aux classes de directives pour gérer les événements déclenchés sur n’importe quel élément DOM.