Comment créer des tuyaux personnalisés dans Angular

Les tuyaux sont une fonctionnalité angulaire puissante qui vous permet de transformer et de formater des données dans votre application. Ils offrent un moyen pratique de manipuler les données avant de les afficher à l'utilisateur, rendant votre application plus dynamique et conviviale.

Angular propose une variété de canaux intégrés tels que DatePipe, CurrencyPipe et UpperCasePipe. Outre les canaux intégrés proposés par Angular, vous pouvez créer des canaux personnalisés pour transformer les données comme vous le souhaitez.

Configurez votre projet angulaire

Avant de créer des canaux personnalisés, assurez-vous de comprendre les tuyaux en angulaire. Pour pouvoir configurer un projet Angular, assurez-vous que la CLI Angular est installée sur votre machine. Vous pouvez l'installer avec npm (gestionnaire de packages de nœuds).

Installez l'Angular CLI en exécutant la commande suivante :

npm install -g @angular/cli

Ensuite, créez un nouveau projet Angular en exécutant cette commande :

ng new my-app

Une fois que vous avez créé le projet, accédez au répertoire de votre projet et ouvrez votre application sur votre IDE.

Créer un tuyau personnalisé

Maintenant que vous avez configuré votre application Angular, la prochaine chose à faire est de créer un canal personnalisé. Pour créer un canal personnalisé, vous devez en générer un nouveau à l'aide de la CLI angulaire.

Pour ce faire, exécutez la commande suivante dans le répertoire de votre application sur le terminal :

ng generate pipe customPipe

Cette commande générera deux fichiers nommés personnalisé-pipe.pipe.ts et personnalisé-pipe.pipe.spec.ts dans le src/application annuaire. Le fichier custom-pipe.pipe.ts est un fichier TypeScript qui contient le code permettant de définir votre canal personnalisé. Vous utiliserez custom-pipe.pipe.spec.ts pour exécuter des tests sur le canal personnalisé.

Dans le personnalisé-pipe.pipe.ts fichier, vous trouverez ces lignes de code :

import { Pipe, PipeTransform } from'@angular/core';
@Pipe({
 name: 'customPipe'
})
exportclass CustomPipePipe implements PipeTransform {
 transform(value: unknown, ...args: unknown[]): unknown {
returnnull;
 }
}

Ce bloc de code importe le Tuyau décorateur et le PipeTransformation interface depuis le @angulaire/noyau module. Le décorateur Pipe définit les métadonnées du tuyau et la classe pipe implémente l'interface PipeTransform.

Dans le Tuyau personnaliséTuyau classe, vous implémentez la PipeTransformation interface, ce qui nécessite la mise en œuvre de l'interface transformer méthode. La méthode de transformation est responsable de la transformation de la valeur d'entrée.

Le transformer la méthode prend deux paramètres, valeur et arguments. Le paramètre value représente la valeur de transformation du canal et le paramètre args représente les paramètres facultatifs que vous souhaiterez peut-être ajouter.

Vous avez maintenant compris le principe du personnalisé-pipe.pipe.ts fichier, remplacez le bloc de code ci-dessus par ce code :

import { Pipe, PipeTransform } from'@angular/core';
@Pipe({
 name: 'customPipe'
})
exportclass CustomPipePipe implements PipeTransform {
 transform(value: string): string[] {
return value.split('');
 }
}

Dans ce bloc de code, le transformer la méthode prend le valeur paramètre du type chaîne comme argument et renvoie un tableau de chaînes. La méthode de transformation divise la chaîne d'entrée en un tableau de caractères individuels à l'aide du diviser méthode et renvoie le tableau résultant.

Intégration du canal personnalisé dans votre application

Vous avez créé avec succès votre canal personnalisé et pouvez maintenant l'utiliser dans vos modèles angulaires. Avant d'utiliser le canal personnalisé dans votre application, importez-le et déclarez-le dans votre app.module.ts déposer. Pour ce faire, remplacez le code dans app.module.ts par ce qui suit :

import { NgModule } from'@angular/core';
import { BrowserModule } from'@angular/platform-browser';
import { AppRoutingModule } from'./app-routing.module';
import { AppComponent } from'./app.component';
import { CustomPipePipe } from'./custom-pipe.pipe';
@NgModule({
 declarations: [
 AppComponent,
 CustomPipePipe
 ],
 imports: [
 BrowserModule,
 AppRoutingModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
exportclass AppModule { }

Vous pouvez désormais utiliser le tube dans vos modèles. Ouvrez le app.component.html fichier et ajoutez le code suivant :

<p>{{ 'apple' | CustomPipe }}p>

Dans cet exemple, vous utilisez le Tuyau personnalisé tuyau pour transformer la chaîne 'pomme' dans un tableau de chaînes.

Testez votre tuyau personnalisé

Pour voir votre canal personnalisé en action, exécutez le serveur de développement Angular. Vous pouvez le faire en exécutant la commande de terminal suivante :

ng serve

Ouvrez votre navigateur et accédez à http://localhost: 4200. Vous devriez voir la chaîne transformée affichée sur la page :

Faites passer vos applications angulaires au niveau supérieur

Les tuyaux sont un outil angulaire puissant qui vous permet de transformer et de formater des données dans votre application. Vous pouvez créer des canaux personnalisés pour répondre à vos besoins spécifiques et rendre votre application Angular plus dynamique.

Une autre façon de faire passer vos applications Angular au niveau supérieur est de comprendre le routage dans Angular. Le routage est un concept clé qui vous permet de contrôler la façon dont les utilisateurs naviguent dans votre application. En comprenant le routage, vous pouvez créer des applications d’une seule page plus conviviales et plus efficaces.