Comment utiliser et créer des directives personnalisées dans Angular

Après avoir longtemps joué avec Angular, j'ai finalement trouvé une explication compréhensible des directives angulaires. Dans cet article, nous allons d'abord comprendre ce qu'est exactement une directive et comment l'utiliser dans Angular. Nous créerons également nos propres directives personnalisées. alors qu'attendons-nous? Plongeons-y profondément.

Qu'est-ce qu'une directive angulaire?

Les directives sont les fonctions qui s'exécutent chaque fois que le compilateur Angular le trouve . Les directives angulaires améliorent la capacité des éléments HTML en attachant des comportements personnalisés au DOM.

À partir du concept de base, les directives angulaires sont classées en trois catégories.

  1. Directives d'attribut
  2. Directives structurelles
  3. Composants

Directives d'attribut

Les directives d'attributs sont responsables de la manipulation de l'apparence et du comportement des éléments DOM. Nous pouvons utiliser des directives d'attribut pour changer le style des éléments DOM. Ces directives sont également utilisées pour masquer ou afficher des éléments DOM particuliers de manière conditionnelle. Angular fournit de nombreuses directives d'attributs intégrées telles que NgStyle , NgClass , etc. Nous pouvons également créer nos propres directives d'attributs personnalisées pour la fonctionnalité souhaitée.

Directives structurelles

Les directives structurelles sont chargées de modifier la structure du DOM. Ils fonctionnent en ajoutant ou en supprimant les éléments du DOM, contrairement aux directives d'attribut qui changent simplement l'apparence et le comportement de l'élément.

Vous pouvez facilement différencier la directive structurelle et attributaire en examinant la syntaxe. Le nom de la directive structurelle commence toujours par un préfixe astérisque (*), alors que la directive d'attribut ne contient aucun préfixe. Les trois directives structurelles intégrées les plus populaires fournies par Angular sont NgIf , NgFor et NgSwitch .

Composants

Les composants sont des directives avec des modèles. La seule différence entre les composants et les deux autres types de directives est le modèle. Les directives d'attribut et de structure n'ont pas de modèles. Ainsi, nous pouvons dire que le composant est une version plus propre de la directive avec un modèle, qui est plus facile à utiliser.

Utilisation des directives intégrées angulaires

Il existe de nombreuses directives intégrées disponibles dans Angular que vous pouvez facilement utiliser. Dans cette section, nous utiliserons deux directives intégrées très simples.

La directive NgStyle est une directive d'attribut utilisée pour modifier le style de tout élément DOM sur la base d'une condition.

I am an Attribute Directive

Dans l'extrait de code ci-dessus, nous ajoutons un arrière-plan bleu si la valeur de isBluevariable est true. Si la valeur de isBluevariable est false, alors l'arrière-plan de l'élément ci-dessus sera rouge.

La directive NgIf est une directive structurelle utilisée pour ajouter des éléments dans le DOM selon certaines conditions.

I am a Structural Directive

Dans l'extrait de code ci-dessus, le paragraphe entier restera dans le DOM si la valeur de showvariable est true, sinon il démarrera du DOM.

Création d'une directive d'attribut personnalisé

La création d'une directive personnalisée revient à créer un composant angulaire. Pour créer une directive personnalisée, nous devons remplacer @Componentdécorateur par @Directivedécorateur.

Alors, commençons par créer notre première directive d'attribut personnalisé. Dans cette directive, nous allons mettre en évidence l'élément DOM sélectionné en définissant la couleur d'arrière-plan d'un élément.

Créez un app-highlight.directive.tsfichier dans le src/appdossier et ajoutez l'extrait de code ci-dessous.

import { Directive, ElementRef } from '@angular/core';
@Directive({
 selector: '[appHighlight]'
})
export class HighlightDirective {
 constructor(private eleRef: ElementRef) {
 eleRef.nativeElement.style.background = 'red';
 }
}

Ici, nous importons Directiveet ElementRefdepuis Angular Core. Le Directivefournit la fonctionnalité de @Directivedécorateur dans laquelle nous fournissons son sélecteur de propriété appHighLightafin que nous puissions utiliser ce sélecteur n'importe où dans l'application. Nous importons également le ElementRefqui est responsable de l'accès à l'élément DOM.

Maintenant, pour que appHighlightDirective fonctionne, nous devons ajouter notre Directive au tableau des déclarations dans le app.module.tsfichier.

import ...;
import { ChangeThemeDirective } from './app-highlight.directive';
@NgModule({
declarations: [
AppComponent,
ChangeThemeDirective
],
imports: [
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Nous allons maintenant utiliser notre directive personnalisée nouvellement créée. J'ajoute la appHightlightdirective dans le app.component.htmlmais vous pouvez l'utiliser n'importe où dans l'application.

Highlight Me !

La sortie de l'extrait de code ci-dessus ressemblera à ceci.

Création d'une directive structurelle personnalisée

Dans la section précédente, nous avons créé notre première directive Attribute. La même approche est également utilisée pour créer la directive structurelle.

Alors, commençons par créer notre directive structurelle. Dans cette directive, nous allons mettre en œuvre la *appNotdirective qui fonctionnera juste en face de *ngIf.

Créez maintenant un app-not.directive.tsfichier dans le src/appdossier et ajoutez le code ci-dessous.

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({
 selector: '[appNot]'
})
export class AppNotDirective {
constructor(
 private templateRef: TemplateRef,
 private viewContainer: ViewContainerRef) { }
 @Input() set appNot(condition: boolean) {
 if (!condition) {
 this.viewContainer.createEmbeddedView(this.templateRef);
 } else {
 this.viewContainer.clear(); }
 }
}

Comme vous l'avez vu dans l'extrait de code ci-dessus, nous importons Directive, Input, TemplateRef and ViewContainerRefdepuis@angular/core.

Directivefournit la même fonctionnalité pour le @Directivedécorateur. Le Inputdécorateur sert à communiquer entre les deux composants. Il envoie des données d'un composant à l'autre à l'aide de la liaison de propriété.

TemplateRefreprésente le modèle incorporé utilisé pour instancier les vues incorporées. Ces vues intégrées sont liées au modèle qui doit être rendu.

ViewContainerRefest un conteneur dans lequel une ou plusieurs vues peuvent être attachées. Nous pouvons utiliser la createEmbeddedView()fonction pour attacher les modèles intégrés dans le conteneur.

Maintenant, pour que la appNotdirective fonctionne, nous devons ajouter notre directive au tableau des déclarations dans le app.module.tsfichier.

import ...;
import { AppNotDirective } from './app-not.directive';
@NgModule({
declarations: [
AppComponent,
AppNotDirective
],
imports: [
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Il est maintenant temps d'utiliser notre directive structurelle nouvellement créée.

J'ajoute la appNotdirective dans le app.component.htmlmais vous pouvez l'utiliser n'importe où dans l'application.

True

False

La *appNotdirective est conçue de manière à ajouter l'élément de modèle dans le DOM si la *appNotvaleur est falsejuste en face de la *ngIfdirective.

La sortie de l'extrait de code ci-dessus ressemblera à ceci.

J'espère que cet article a répondu à la plupart de vos questions concernant les directives angulaires. Si vous avez des questions ou des doutes, n'hésitez pas à me contacter dans la zone de commentaires.