Comment créer des directives personnalisées en angulaire

Comment créer des directives personnalisées en angulaire
Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation. En savoir plus.

L'une des fonctionnalités clés d'Angular réside dans les directives. Les directives angulaires vous permettent d'ajouter un comportement aux éléments DOM. Angular fournit une variété de directives intégrées et vous pouvez également créer des directives personnalisées dans ce cadre robuste.





comment démonter xbox one
Vidéo MUO du jour DÉFILEZ POUR CONTINUER AVEC LE CONTENU

Que sont les directives ?

Les directives sont des codes personnalisés qu'Angular utilise pour modifier le comportement ou l'apparence d'un élément HTML. Vous pouvez utiliser des directives pour ajouter des écouteurs d'événements, modifier le DOM ou afficher ou masquer des éléments.



Il existe deux types de directives intégrées dans Angular , structurel et attribut. Les directives structurelles modifient la structure du DOM, tandis que les directives d'attribut modifient l'apparence ou le comportement d'un élément. Les directives sont un moyen puissant d'étendre les fonctionnalités des composants angulaires.





Avantages des directives

Voici quelques-uns des avantages de l’utilisation de directives dans Angular :

  • Réutilisabilité : Vous pouvez utiliser des directives dans plusieurs composants, ce qui vous fait gagner du temps et des efforts.
  • Extensibilité : Vous pouvez étendre les directives pour ajouter de nouvelles fonctionnalités, rendant ainsi vos composants plus puissants.
  • La flexibilité : À l'aide de directives, vous pouvez modifier le comportement ou l'apparence d'un élément de différentes manières, vous offrant ainsi une grande flexibilité lors de la construction de vos applications.

Configuration de votre application angulaire

Pour configurer une application Angular, installez la CLI Angular en exécutant le code suivant dans votre terminal :



 npm install -g @angular/cli

Après avoir installé Angular CLI, créez un projet Angular en exécutant la commande suivante :

 ng new custom-directives-app

L'exécution de la commande ci-dessus créera un projet angulaire nommé application-directives-personnalisées .



Création d'une directive personnalisée

Vous avez maintenant un projet Angular et pouvez commencer à créer vos directives personnalisées. Créez un fichier TypeScript et définissez une classe décorée avec le @Directif décorateur.

Le @Directif decorator est un décorateur TypeScript utilisé pour créer des directives personnalisées. Créez maintenant un highlight.directive.ts fichier dans le src/application annuaire. Dans ce fichier, vous allez créer la directive personnalisée souligner .



Par exemple:

 import { Directive } from "@angular/core"; 
 
@Directive({ 
  selector: "[myHighlight]", 
}) 
export class HighlightDirective { 
  constructor() {} 
}

Le bloc de code ci-dessus importe le Directif décorateur du @angulaire/noyau module. Le @Directif décorateur décore le HighlightDirective classe. Il prend un objet comme argument avec un sélecteur propriété.

Dans ce cas, vous définissez le sélecteur propriété à [mon surbrillance] ce qui signifie que vous pouvez appliquer cette directive à vos modèles en ajoutant le mon surbrillance attribut à un élément.

Voici un exemple de la façon d'utiliser la directive dans vos modèles :

 <main> 
 <p myHighlight>Some text</p> 
</main>

Ajouter du comportement à la directive

Vous avez maintenant créé avec succès une directive. L'étape suivante consiste à ajouter un comportement à la directive afin qu'elle puisse manipuler le DOM. Vous aurez besoin du ÉlémentRéf depuis @angular/core pour ajouter un comportement à une directive.

Vous injecterez ElementRef dans le constructeur de la directive. ElementRef est un wrapper autour d'un élément natif à l'intérieur d'une vue.

Voici un exemple de la façon dont vous ajoutez un comportement à une directive :

 import { Directive, ElementRef } from "@angular/core"; 
 
@Directive({ 
    selector: "[myHighlight]" 
}) 
export class HighlightDirective { 
    constructor(private element: ElementRef) { 
        this.element.nativeElement.style.backgroundColor = 'lightblue'; 
    } 
}

Dans cet exemple, le constructeur du HighlightDirective La classe prend un paramètre ElementRef, qu'Angular injecte automatiquement. ElementRef donne accès à l'élément DOM sous-jacent.

En utilisant this.element.nativeElement propriété, vous accédez à l'élément DOM natif du élément paramètre. Vous définissez ensuite la couleur d'arrière-plan du composant sur bleu clair en utilisant le style propriété. Cela signifie que quel que soit l'élément auquel vous appliquez le mon surbrillance La directive aura un fond bleu clair.

Pour rendre la directive fonctionnelle, assurez-vous de l'importer et de la déclarer dans le app.module.ts déposer.

Par exemple:

 import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
 
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { HighlightDirective } from './highlight.directive'; 
 
@NgModule({ 
  declarations: [ 
    AppComponent, 
    HighlightDirective, 
  ], 
  imports: [ 
    BrowserModule, 
    AppRoutingModule 
  ], 
  providers: [], 
  bootstrap: [AppComponent] 
}) 
export class AppModule { }

Vous pouvez maintenant appliquer la directive myHighlight aux éléments dans vos composants angulaires .

Windows 10 déplace le dossier utilisateur vers un autre lecteur 
 <main> 
 <p myHighlight>Some text</p> 
</main>

Exécutez votre application sur le serveur de développement pour tester si la directive est fonctionnelle. Vous pouvez le faire en exécutant la commande suivante dans votre terminal :

 ng serve

Après avoir exécuté la commande, accédez à http://localhost:4200/ sur votre navigateur Web et vous verrez une interface qui ressemble à l’image ci-dessous.

capture d'écran de l'application de directives personnalisées

Les directives angulaires intégrées acceptent des valeurs pour modifier l'apparence des éléments, mais la directive personnalisée mon surbrillance ne fait pas. Vous pouvez configurer la directive pour accepter une valeur qu'elle utilisera pour définir dynamiquement la couleur d'arrière-plan du modèle.

Pour ce faire, remplacez le code dans le highlight.directive.ts fichier avec ceci :

 import { Directive, ElementRef, Input } from "@angular/core"; 
 
@Directive({ 
    selector: "[myHighlight]" 
}) 
 
export class HighlightDirective { 
    @Input() set myHighlight(color: string) { 
        this.element.nativeElement.style.backgroundColor = color; 
    } 
 
    constructor(private element: ElementRef) {  
    } 
}

Dans le bloc de code ci-dessus, le HighlightDirective la classe contient une méthode setter appelée mon surbrillance . Cette méthode prend un couleur paramètre de la chaîne de type. Vous décorez la méthode setter avec le @Saisir décorateur, vous permettant de transmettre la valeur de couleur dans la directive à partir du composant parent.

Vous pouvez maintenant déterminer la couleur d'arrière-plan en passant une valeur à la directive myHighlight.

Par exemple:

 <main> 
 <p myHighlight='pink'>Some text</p> 
</main>

Création d'une directive structurelle personnalisée

Dans les sections précédentes, vous avez appris à créer, ajouter des comportements et appliquer des directives d'attributs personnalisées à votre modèle. Les directives d'attribut modifient l'apparence des éléments du DOM, tandis que les directives structurelles ajoutent, suppriment ou déplacent des éléments dans le DOM.

Angular fournit deux directives structurelles, ngPour et GIF . La directive ngFor restitue un modèle pour chaque élément d'une collection (tableau), tandis que le GIF gère le rendu conditionnel.

Dans cette section, vous allez créer une directive structurelle personnalisée qui fonctionne comme la GIF directif. Pour ce faire, créez un condition.directive.ts déposer.

Dans le condition.directive.ts fichier, écrivez ce code :

 import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core' 
 
@Directive({ 
    selector: "[condition]" 
}) 
 
export class ConditionDirective { 
 
    @Input() set condition(arg: boolean) { 
        if(arg) { 
            this.viewContainer.createEmbeddedView(this.template) 
        } else { 
            this.viewContainer.clear(); 
        } 
    } 
 
    constructor( 
 private template: TemplateRef<unknown>,  
 private viewContainer: ViewContainerRef  
 ) {} 
}

Ce bloc de code vous permet de restituer conditionnellement des éléments en appliquant le condition directive à un élément et en passant une valeur booléenne du composant parent.

Dans le constructeur du ConditionDirective classe, vous injectez une instance de ModèleRéf et ViewContainerRef . TemplateRef représente le modèle associé à la directive et ViewContainerRef représente le conteneur dans lequel l'application restitue les vues.

La méthode de définition de classe ConditionDirective utilise une instruction if else pour vérifier le paramètre arg. La directive crée une vue intégrée à l'aide du modèle fourni si le paramètre est vrai. Le créer une vue intégrée La méthode de la classe ViewContainerRef crée et restitue la vue dans le DOM.

Si le paramètre est FAUX , la directive efface le conteneur de vue en utilisant le clair méthode de la classe ViewContainerRef. Cela supprime toutes les vues précédemment rendues du DOM.

Après avoir créé la directive, enregistrez-la dans votre projet en l'important et en la déclarant dans le fichier app.module.ts déposer. Après cela, vous pouvez commencer à utiliser la directive dans vos modèles.

Voici un exemple de la façon de l’utiliser dans vos modèles :

 <main> 
 <p *condition="true">Hello There!!!</p> 
</main>

Vous pouvez désormais créer des directives personnalisées

Les directives personnalisées dans Angular offrent un moyen puissant de manipuler le DOM et d'ajouter un comportement dynamique à vos modèles. Vous avez appris à créer et appliquer des attributs personnalisés et des directives structurelles dans vos applications Angular. En comprenant comment créer et utiliser des directives personnalisées, vous pouvez profiter pleinement des capacités d'Angular.