Come creare pipe personalizzate in Angular

Le pipe sono una potente funzionalità Angular che ti consente di trasformare e formattare i dati nella tua applicazione. Forniscono un modo conveniente per manipolare i dati prima di mostrarli all'utente, rendendo la tua applicazione più dinamica e facile da usare.

Angular offre una varietà di pipe integrate come DatePipe, ValutaPipe e UpperCasePipe. Insieme alle pipe integrate offerte da Angular, puoi creare pipe personalizzate per trasformare i dati nel modo di cui hai bisogno.

Configura il tuo progetto Angular

Prima di creare tubi personalizzati, assicurati di capire i tubi in Angular. Per poter configurare un progetto Angular, assicurati di avere la CLI Angular installata sul tuo computer. Puoi installarlo con npm (Gestore pacchetti nodo).

Installa la CLI Angular eseguendo il comando seguente:

npm install -g @angular/cli

Successivamente, crea un nuovo progetto Angular eseguendo questo comando:

ng new my-app

Una volta creato il progetto, vai alla directory del progetto e apri l'applicazione sul tuo IDE.

Crea una pipa personalizzata

Ora che hai configurato la tua applicazione Angular, la prossima cosa da fare è creare una pipe personalizzata. Per creare una pipe personalizzata, devi generarne una nuova utilizzando la CLI Angular.

Per fare ciò, esegui il comando seguente nella directory della tua app sul terminale:

ng generate pipe customPipe

Questo comando genererà due file denominati custom-pipe.pipe.ts E custom-pipe.pipe.spec.ts nel src/app directory. Il file custom-pipe.pipe.ts è un file TypeScript che contiene il codice per definire la tua pipa personalizzata. Utilizzerai custom-pipe.pipe.spec.ts per eseguire test sulla pipe personalizzata.

Nel custom-pipe.pipe.ts file, troverai queste righe di codice:

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

Questo blocco di codice importa il file Tubo decoratore e il PipeTransform interfaccia da @angolare/core modulo. Il decoratore Pipe definisce i metadati per la pipe e la classe pipe implementa l'interfaccia PipeTransform.

Nel CustomPipePipe class, implementi il ​​file PipeTransform interfaccia, che richiede l'implementazione di trasformare metodo. Il metodo di trasformazione è responsabile della trasformazione del valore di input.

IL trasformare il metodo accetta due parametri, valore E arg. Il parametro value rappresenta il valore di trasformazione della pipe e il parametro args rappresenta i parametri facoltativi che potresti voler aggiungere.

Ora hai capito lo standard del custom-pipe.pipe.ts file, sostituisci il blocco di codice sopra con questo codice:

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

In questo blocco di codice, il trasformare il metodo prende il valore parametro del tipo corda come argomento e restituisce un array di stringhe. Il metodo di trasformazione divide la stringa di input in un array di singoli caratteri utilizzando il metodo diviso metodo e restituisce l'array risultante.

Integrazione della tubazione personalizzata nella tua applicazione

Hai creato con successo la tua pipe personalizzata e ora puoi utilizzarla nei tuoi modelli Angular. Prima di utilizzare la pipe personalizzata nella tua applicazione, importala e dichiarala nel tuo file app.modulo.ts file. Per fare ciò, sostituisci il codice in app.module.ts con quanto segue:

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 { }

Ora puoi utilizzare la pipe nei tuoi modelli. Apri il app.component.html file e aggiungi il seguente codice:

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

In questo esempio, usi il file CustomPipe pipe per trasformare la corda 'mela' in un array di stringhe.

Metti alla prova la tua pipa personalizzata

Per vedere la tua pipe personalizzata in azione, esegui il server di sviluppo Angular. Puoi farlo eseguendo il seguente comando da terminale:

ng serve

Apri il browser e vai a http://localhost: 4200. Dovresti vedere la stringa trasformata visualizzata nella pagina:

Porta le tue applicazioni Angular al livello successivo

Le pipe sono un potente strumento Angular che ti consente di trasformare e formattare i dati nella tua applicazione. Puoi creare pipe personalizzate per soddisfare le tue esigenze specifiche e rendere la tua applicazione Angular più dinamica.

Un altro modo per portare le tue applicazioni Angular al livello successivo è comprendere il routing in Angular. Il routing è un concetto chiave che ti consente di controllare il modo in cui gli utenti navigano nella tua applicazione. Comprendendo il routing, è possibile creare applicazioni a pagina singola più facili da usare ed efficienti.