Comment créer des directives personnalisées en angulaire
Une des composantes essentielles d'Angular réside dans l'utilisation des directives. Celles-ci permettent d'enrichir les éléments du DOM avec des comportements spécifiques. Angular met à disposition un éventail de directives pré-construites, et offre également la possibilité de créer des directives personnalisées adaptées à vos besoins.
Qu'est-ce qu'une directive ?
Les directives sont des segments de code personnalisés qu'Angular emploie pour modifier le comportement ou l'apparence d'un élément HTML. Elles permettent notamment d'ajouter des écouteurs d'événements, de manipuler le DOM ou encore de gérer l'affichage conditionnel d'éléments.
On distingue deux grandes familles de directives intégrées à Angular : les directives structurelles et les directives d'attributs. Les premières agissent sur la structure du DOM, tandis que les secondes modifient l'aspect ou le fonctionnement d'un élément. En somme, les directives constituent un outil puissant pour étendre les fonctionnalités des composants Angular.
Avantages des directives
Voici quelques bénéfices liés à l'emploi de directives au sein d'Angular :
- Réutilisabilité : Les directives peuvent être employées dans divers composants, ce qui optimise le temps et les efforts de développement.
- Extensibilité : Les directives peuvent être enrichies de nouvelles fonctionnalités, augmentant ainsi la puissance des composants.
- Flexibilité : Grâce aux directives, il est possible de modifier le comportement ou l'apparence d'un élément de multiples façons, offrant une grande souplesse lors de la conception d'applications.
Mise en place d'une application Angular
Pour initialiser une application Angular, installez d'abord l'interface en ligne de commande (CLI) d'Angular en exécutant la commande suivante dans votre terminal :
npm install -g @angular/cli
Une fois la CLI installée, créez un nouveau projet Angular à l'aide de la commande suivante :
ng new custom-directives-app
Cette action générera un projet Angular nommé `custom-directives-app`.
Création d'une directive personnalisée
Votre projet Angular est maintenant prêt, vous pouvez donc commencer à développer vos propres directives. Créez un fichier TypeScript et définissez une classe ornée du décorateur `@Directive`.
Le décorateur `@Directive` est un élément TypeScript utilisé pour la création de directives personnalisées. Créez un fichier `highlight.directive.ts` dans le répertoire `src/app`. C'est dans ce fichier que vous allez élaborer la directive personnalisée de mise en évidence.
Par exemple :
import { Directive } from "@angular/core";@Directive({
selector: "[myHighlight]",
})
export class HighlightDirective {
constructor() {}
}
Le code ci-dessus importe le décorateur de directive à partir du module `@angular/core`. Ce décorateur est appliqué à la classe `HighlightDirective`. Il reçoit un objet en argument qui contient une propriété `selector`.
Dans cet exemple, nous définissons la propriété `selector` à `[myHighlight]`, ce qui permet d'appliquer cette directive à vos modèles en ajoutant l'attribut `myHighlight` à un élément.
Voici un exemple d'utilisation de cette directive au sein de vos modèles :
<main>
<p myHighlight>Some text</p>
</main>
Ajout de comportement à la directive
Vous avez maintenant créé une directive. L'étape suivante consiste à ajouter un comportement spécifique afin qu'elle puisse manipuler le DOM. Pour cela, vous aurez besoin de `ElementRef` du module `@angular/core`.
Vous allez injecter `ElementRef` dans le constructeur de la directive. `ElementRef` est un enveloppeur autour d'un élément natif dans une vue.
Voici un exemple de la façon d'ajouter 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 de la classe `HighlightDirective` prend un paramètre `ElementRef`, qu'Angular injecte automatiquement. `ElementRef` offre un accès à l'élément DOM sous-jacent.
À l'aide de la propriété `this.element.nativeElement`, vous accédez à l'élément DOM natif associé au paramètre `element`. Ensuite, vous définissez la couleur d'arrière-plan du composant sur bleu clair à l'aide de la propriété `style`. Cela signifie que tout élément auquel vous appliquerez la directive `myHighlight` aura un arrière-plan bleu clair.
Pour que la directive soit fonctionnelle, assurez-vous de l'importer et de la déclarer dans le fichier `app.module.ts`.
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 désormais appliquer la directive `myHighlight` aux éléments de vos composants Angular.
<main>
<p myHighlight>Some text</p>
</main>
Exécutez votre application sur le serveur de développement pour vérifier le bon fonctionnement de la directive. Pour cela, lancez la commande suivante dans votre terminal :
ng serve
Après l'exécution de la commande, accédez à `http://localhost:4200/` dans votre navigateur Web, vous devriez voir une interface similaire à l'image ci-dessous.
Les directives intégrées d'Angular acceptent des valeurs pour modifier l'apparence des éléments, ce qui n'est pas le cas de la directive personnalisée `myHighlight`. Vous pouvez configurer la directive pour qu'elle accepte une valeur qui sera utilisée pour définir dynamiquement la couleur d'arrière-plan du modèle.
Pour ce faire, remplacez le contenu du fichier `highlight.directive.ts` par le code suivant :
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 code ci-dessus, la classe `HighlightDirective` contient une méthode `set` nommée `myHighlight`. Cette méthode prend un paramètre de type chaîne, `color`. Le décorateur `@Input` est appliqué à la méthode `setter`, permettant de transmettre la valeur de couleur à la directive depuis le composant parent.
Vous pouvez à présent contrôler 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'attribut personnalisées à vos modèles. Les directives d'attribut modifient l'aspect des éléments du DOM, tandis que les directives structurelles ajoutent, suppriment ou déplacent des éléments dans le DOM.
Angular fournit notamment deux directives structurelles, `ngFor` et `ngIf`. La directive `ngFor` génère un modèle pour chaque élément d'une collection (tableau), tandis que `ngIf` gère le rendu conditionnel.
Dans cette section, nous allons créer une directive structurelle personnalisée, similaire à la directive `ngIf`. Pour cela, créez un fichier `condition.directive.ts`.
Dans ce fichier `condition.directive.ts`, écrivez le code suivant :
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 code permet de restituer des éléments de manière conditionnelle en appliquant la directive `condition` à un élément et en passant une valeur booléenne depuis le composant parent.
Dans le constructeur de la classe `ConditionDirective`, nous injectons une instance de `TemplateRef` et de `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 `set` de la classe `ConditionDirective` utilise une instruction `if else` pour examiner le paramètre `arg`. La directive génère une vue intégrée à l'aide du modèle fourni si le paramètre est vrai. La méthode `createEmbeddedView` 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 à l'aide de la méthode `clear` 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`. Ensuite, vous pourrez utiliser la directive dans vos modèles.
Voici un exemple d'utilisation 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 outil puissant pour manipuler le DOM et enrichir vos modèles avec un comportement dynamique. Vous avez appris comment créer et appliquer des directives d'attributs personnalisées et des directives structurelles dans vos applications Angular. En comprenant comment créer et utiliser les directives personnalisées, vous pouvez exploiter pleinement les capacités d'Angular.