Ao desenvolver interfaces de usuário com Angular, o conceito de “Pipes” é frequentemente encontrado. Mas, afinal, o que são e como operam?
O Angular se destaca entre os cinco frameworks e tecnologias web mais cobiçados, segundo o levantamento do StackOverflow.
Sua arquitetura modular é um dos trunfos que o torna tão popular entre desenvolvedores, possibilitando a divisão de aplicativos em componentes menores e reutilizáveis. Um código modular facilita a manutenção e impulsiona a colaboração. Além disso, a vinculação bidirecional de dados, a compatibilidade entre navegadores e um ecossistema e comunidade robustos são outras razões que consolidam o Angular como um dos melhores frameworks front-end.
Este artigo tem como objetivo esclarecer o que são Pipes no Angular, seus usos, os diversos tipos de Pipes embutidos e como criar seus próprios Pipes personalizados.
O que são Pipes no Angular?
Pipes são um mecanismo do Angular que transforma e formata dados dentro de um aplicativo. Eles recebem um valor como entrada e retornam um valor transformado como saída. As transformações podem variar desde a simples formatação de uma moeda ou data até a ordenação ou filtragem de itens em uma lista.
Os Pipes são pensados para aprimorar a experiência do usuário, apresentando dados de maneira que sejam facilmente compreensíveis e interativos. No Angular, os Pipes podem ser embutidos ou personalizados. Independentemente do tipo, algumas razões para utilizar Pipes incluem:
- Transformação de dados: Esta é a principal função dos Pipes. Eles garantem que os dados exibidos aos usuários sejam legíveis e apresentáveis.
- Legibilidade e manutenção do código: Em ambientes de desenvolvimento colaborativo, é essencial que o código seja compreensível para todos. Pipes tornam o código mais conciso e fácil de manter.
- Localização: É possível adaptar os dados para diferentes mercados, como, por exemplo, usar o DatePipe para formatar datas de acordo com a localidade do usuário.
- Ordenação e filtragem de dados: Pipes como o OrderPipe e o FilterPipe permitem ordenar e filtrar dados.
Tipos de Pipes Embutidos no Angular
O Angular oferece diversos Pipes embutidos, projetados para diferentes funcionalidades. Alguns exemplos que você poderá encontrar em sua jornada de desenvolvimento incluem:
- PercentPipe: Utilizado para transformar um número em uma string de porcentagem.
- DatePipe: Formata um valor de data baseado nas regras de localização.
- LowerCasePipe: Converte todo o texto para letras minúsculas.
- UpperCasePipe: Converte todo o texto para letras maiúsculas.
- CurrencyPipe: Transforma um número em uma string de moeda, respeitando as regras de localização.
- DecimalPipe: Formata um número para uma string com ponto decimal, seguindo as regras de localização.
Criando Pipes Personalizados no Angular
Embora os Pipes embutidos sejam extremamente úteis, o Angular também permite a criação de Pipes personalizados. Estes são essenciais quando os Pipes nativos não atendem às necessidades específicas do projeto, expandindo a funcionalidade do seu aplicativo.
Pré-requisitos
Para criar Pipes personalizados no Angular, você precisará de:
- Um ambiente Node.js em funcionamento para seu aplicativo Angular. Caso não possua, você pode baixar o Node.js.
- Conhecimento de como o Angular opera.
- O CLI do Angular para criar seu projeto e executar comandos. Instale-o usando o comando:
npm install -g @angular/cli
Siga estes passos para criar um Pipe personalizado no Angular:
#1. Crie um novo projeto Angular utilizando o comando:
ng new pipes
#2. Acesse o diretório do projeto e abra-o no seu editor de código favorito. Os comandos são:
cd pipes && code .
A estrutura de pastas do projeto será semelhante a esta:
#3. Gere um novo Pipe personalizado com o comando:
ng generate pipe custom
Você verá que dois arquivos foram criados:
src/app/custom.pipe.spec.ts
src/app/custom.pipe.ts
#4. Defina a lógica do seu Pipe.
Abra o arquivo custom.pipe.ts, cujo conteúdo inicial será:
Vamos criar uma lógica simples que divide uma string em um array de caracteres:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'custom'
})
export class CustomPipe implements PipeTransform {
transform(value: string): string[] {
return value.split('');
}
}
#5. Registre seu Pipe personalizado no arquivo app.module.ts e verifique as decorações @NgModule. O código deve ser parecido com este:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CustomPipe } from './custom.pipe';
@NgModule({
declarations: [
AppComponent,
CustomPipe
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
#6. Abra o arquivo app.component.html, remova o conteúdo existente e insira esta linha:
<header>{{ '12345' | custom }}</header>
Inicie o servidor com o comando:
ng serve
O resultado no seu navegador será:
Como Encadear Pipes no Angular
O encadeamento de Pipes permite aplicar várias transformações em uma única expressão. Para isso, usamos o operador pipe ( | ).
O encadeamento de Pipes é útil para:
- Reutilização e modularidade do código: Cada Pipe executa uma transformação específica que pode ser reutilizada em outras partes do aplicativo.
- Manter o código limpo: O encadeamento de Pipes torna o código mais conciso, limpo e fácil de entender.
- Personalização: Permite combinar Pipes personalizados e embutidos, adaptando-os às suas necessidades.
- Transformações complexas: Em vez de um único Pipe para múltiplas transformações, o encadeamento permite o uso de vários Pipes para alcançar transformações complexas.
Você pode encadear seu Pipe personalizado com outros, sejam eles personalizados ou embutidos. Por exemplo, podemos encadear nosso Pipe “custom” com um “lowercase”:
<p>{{ dataValue | custom | lowercase }}</p>
Pipes Puros vs. Impuros
No Angular, existem dois tipos de Pipes: puros e impuros.
Pipes Puros
Pipes no Angular são puros por padrão. Um Pipe puro deve retornar a mesma saída para a mesma entrada, sendo, portanto, determinístico e sem estado.
O mecanismo de detecção de mudanças do Angular otimiza automaticamente os Pipes puros, evitando a reexecução da transformação a menos que a entrada seja alterada.
Para declarar um Pipe como puro, defina a propriedade `pure` como `true` no decorador `@Pipe`:
@Pipe({
name: 'uppercase',
pure: true
})
export class UppercasePipe {
transform(value: string): string {
return value.toUpperCase();
}
}
Pipes Impuros
Pipes impuros são executados sempre que o Angular detecta qualquer alteração, mesmo que não seja diretamente relacionada à entrada do Pipe. São ideais para situações que exigem acesso ao estado atual do aplicativo, como acessar um banco de dados ou fazer uma requisição HTTP.
Para definir um Pipe como impuro, defina a propriedade `pure` como `false` no decorador `@Pipe`:
@Pipe({
name: 'sort',
pure: false
})
export class SortPipe {
transform(array: any[]): any[] {
return array.sort();
}
}
Criando Pipes no Angular: Boas Práticas
- Nomeie seus Pipes usando camelCase: Use “customPipe” ao invés de “custompipe”.
- Teste seus Pipes: Certifique-se de que seu Pipe funciona como esperado através de testes.
- Evite Pipes complexos: É melhor criar Pipes separados para ações diferentes do que ter um Pipe único fazendo muitas coisas.
- Prefira Pipes puros: O Angular consegue otimizar melhor Pipes puros, o que melhora o desempenho e o tempo de resposta.
Perguntas Frequentes
Por que precisamos de Pipes no Angular?
Pipes transformam e formatam dados em um aplicativo, recebendo um valor como entrada e retornando um valor transformado como saída. Podem ser usados para formatação de moedas e datas, ou para ordenar e filtrar listas.
O que é um Pipe personalizado?
Um Pipe personalizado é um Pipe criado pelo usuário para realizar transformações específicas, podendo ser combinado com outros Pipes através do encadeamento.
Quais são alguns exemplos de Pipes embutidos no Angular?
DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, DecimalPipe e PercentPipe.
O que é encadeamento de Pipes?
O encadeamento de Pipes é o processo de combinar vários Pipes para executar múltiplas operações em uma única expressão. Isso é feito utilizando o operador pipe ( | ).
Conclusão
Esperamos que agora você possa explicar o conceito de Pipes em sua próxima entrevista, pois essa é uma questão comum em perguntas sobre Angular. Exploramos também os diferentes Pipes embutidos e a criação de Pipes personalizados.
Pipes personalizados são úteis para atender necessidades específicas do projeto e tornar seu aplicativo mais dinâmico. Contudo, é fundamental entender o funcionamento interno do Angular para criar e utilizar Pipes personalizados de forma eficaz.
Além disso, você pode explorar algumas bibliotecas de UI do Angular para criar uma experiência de usuário ainda melhor.