Como criar tubos personalizados em Angular

Pipes são um recurso Angular poderoso que permite transformar e formatar dados em seu aplicativo. Eles fornecem uma maneira conveniente de manipular dados antes de exibi-los ao usuário, tornando seu aplicativo mais dinâmico e fácil de usar.

Angular oferece uma variedade de pipes integrados, como DatePipe, CurrencyPipe e UpperCasePipe. Junto com os pipes integrados que o Angular oferece, você pode criar pipes personalizados para transformar dados da maneira que precisar.

Configure seu projeto Angular

Antes de criar pipes personalizados, certifique-se de entender tubos em Angular. Para poder configurar um projeto Angular, certifique-se de ter o Angular CLI instalado em sua máquina. Você pode instalá-lo com npm (gerenciador de pacotes de nós).

Instale o Angular CLI executando o seguinte comando:

npm install -g @angular/cli

A seguir, crie um novo projeto Angular executando este comando:

ng new my-app

Depois de criar o projeto, navegue até o diretório do projeto e abra seu aplicativo no seu IDE.

Crie um tubo personalizado

Agora que você configurou seu aplicativo Angular, a próxima coisa a fazer é criar um canal personalizado. Para criar um pipe personalizado, você deve gerar um novo usando o Angular CLI.

Para fazer isso, execute o seguinte comando no diretório do seu aplicativo no terminal:

ng generate pipe customPipe

Este comando irá gerar dois arquivos chamados tubo personalizado.pipe.ts e tubo personalizado.pipe.spec.ts no fonte/aplicativo diretório. O arquivo custom-pipe.pipe.ts é um arquivo TypeScript que contém o código para definir seu canal personalizado. Você usará custom-pipe.pipe.spec.ts para executar testes no pipe personalizado.

No tubo personalizado.pipe.ts arquivo, você encontrará estas linhas de código:

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

Este bloco de código importa o Cano decorador e o PipeTransform interface do @angular/núcleo módulo. O decorador Pipe define os metadados do pipe e a classe pipe implementa a interface PipeTransform.

No CustomPipePipe classe, você implementa o PipeTransform interface, o que requer a implementação do transformar método. O método transform é responsável por transformar o valor de entrada.

O transformar método leva dois parâmetros, valor e argumentos. O parâmetro value representa o valor de transformação do pipe e o parâmetro args representa parâmetros opcionais que você pode querer adicionar.

Agora você entendeu o padrão do tubo personalizado.pipe.ts arquivo, substitua o bloco de código acima por este código:

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

Neste bloco de código, o transformar método leva o valor parâmetro do tipo corda como um argumento e retorna uma matriz de strings. O método transform divide a string de entrada em uma matriz de caracteres individuais usando o método dividir método e retorna a matriz resultante.

Integrando o Pipe Personalizado em seu Aplicativo

Você criou com sucesso seu pipe personalizado e agora pode usá-lo em seus modelos Angular. Antes de usar o pipe personalizado em sua aplicação, importe-o e declare-o em seu app.module.ts arquivo. Para fazer isso, substitua o código em app.module.ts pelo seguinte:

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

Agora você pode usar o pipe em seus modelos. Abra o app.component.html arquivo e adicione o seguinte código:

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

Neste exemplo, você usa o Tubo personalizado pipe para transformar a string 'maçã' em uma matriz de strings.

Teste seu tubo personalizado

Para ver seu pipe personalizado em ação, execute o servidor de desenvolvimento Angular. Você pode fazer isso executando o seguinte comando de terminal:

ng serve

Abra seu navegador e navegue até http://localhost: 4200. Você deverá ver a string transformada exibida na página:

Leve suas aplicações angulares para o próximo nível

Pipes são uma ferramenta Angular poderosa que permite transformar e formatar dados em seu aplicativo. Você pode criar pipes personalizados para atender às suas necessidades específicas e tornar seu aplicativo Angular mais dinâmico.

Outra maneira de levar seus aplicativos Angular para o próximo nível é entender o roteamento em Angular. O roteamento é um conceito-chave que permite controlar como os usuários navegam em seu aplicativo. Ao compreender o roteamento, você pode criar aplicativos de página única que são mais fáceis de usar e eficientes.