Como criar tubos personalizados em Angular para exibição de dados elegante

Twittar

Pipes em Angular é uma das frases que você encontrará frequentemente ao construir interfaces de usuário usando Angular. O que são e como funcionam?

Angular está entre os 5 frameworks e tecnologias web mais desejados baseados no Pesquisa StackOverflow.

A arquitetura modular torna o Angular o queridinho dos desenvolvedores, permitindo-lhes dividir o aplicativo em componentes pequenos e reutilizáveis. Uma base de código modular é fácil de manter e também aprimora a colaboração. A ligação bidirecional de dados, a compatibilidade entre navegadores e o grande ecossistema e comunidade são outras razões pelas quais o Angular está entre as melhores estruturas de front-end.

Este artigo discute o que são Pipes em Angular, seus casos de uso, diferentes tipos de Pipes integrados e como criar Pipes personalizados em Angular.

últimas postagens

O que são tubos em Angular?

Pipes são um recurso do Angular que transforma e formata dados em um aplicativo. Pipes simplesmente pegam um valor como entrada e retornam um valor transformado como saída. A transformação varia e pode ser tão simples quanto transformar uma moeda ou data ou classificar ou filtrar itens de uma lista.

Os pipes são projetados para aprimorar a experiência do usuário à medida que transformam dados e retornam valores que os usuários podem consumir e interagir facilmente. Os tubos em Angular podem ser integrados ou personalizados. Independentemente do tipo, estas são algumas das razões pelas quais você deve usar pipes no Angular:

Transformar dados: Este é o principal uso de Pipes em Angular. Os pipes existem para transformar dados para que o que é exibido aos usuários seja legível.
Legibilidade e facilidade de manutenção do código: a maioria dos aplicativos é construída por meio de colaboração. Como tal, você deve garantir que os outros membros da equipe entendam seu código. Pipes tornam seu código mais conciso e fácil de manter.
Localização: você pode localizar os dados para adequá-los ao mercado-alvo. Por exemplo, existem diferentes formatos de data. Assim, você pode usar o DatePipe para formatar dados de acordo com a localidade dos usuários.
Classificando e filtrando dados: você pode usar OrderPipe ou FilterPipe para classificar ou filtrar seus dados.

Como remover o Chat e o Meet do Gmail

Tipos de tubos embutidos em Angular

Angular tem vários tubos embutidos projetado para diferentes propósitos. Estes são exemplos de alguns que você encontrará em sua jornada de desenvolvimento.

PercentPipe: Este é o canal a ser usado quando você deseja transformar um número em uma string de porcentagem.
DatePipe: Este é o canal a ser usado para formatar um valor de data com base nas regras de localidade.
LowerCasePipe: Transforme todo o seu texto em minúsculas usando este canal.
UpperCasePipe: Você pode usar este canal quando quiser alterar todo o seu texto para maiúsculas.
CurrencyPipe: É uma escolha perfeita quando você deseja alterar um número para uma string de moeda com base nas regras de localidade.
DecimalPipe: Este canal usa regras de localidade para transformar um número em uma string com ponto decimal.

Crie tubos personalizados em Angular

Vimos pipes integrados e seus casos de uso. No entanto, Angular oferece suporte a pipes personalizados. Esses tubos são importantes quando você deseja alcançar algo que os tubos integrados não conseguem. Esses pipes permitem estender a funcionalidade do seu aplicativo.

Pré-requisitos

Antes de começar a construir Pipes personalizados em Angular, você precisa do seguinte:

Ambiente de execução Node.js para seu aplicativo Angular. Você pode baixar Node.js se você não tiver.
Compreensão de como o Angular funciona
CLI angular para criar seu aplicativo e executar comandos diferentes. Você pode instalá-lo usando este comando;

npm install -g @angular/cli

Siga estas etapas para construir um Pipe personalizado em Angular:

#1. Crie um novo projeto Angular. Você pode usar este comando para começar:

novos canos

#2. Mude o diretório para o aplicativo criado e abra-o em seu editor de código favorito. Estou usando o VsCode. Você pode executar esses comandos

tubos de cd && código.

A pasta do seu projeto será semelhante a esta;

#3. Crie um canal personalizado. Você pode usar este comando para gerar um novo canal personalizado:

ng gerar tubo personalizado

Se você verificar a pasta do seu projeto, notará que estes dois arquivos foram criados:

src/app/custom-pipe.pipe.spec.ts

src/app/custom-pipe.pipe.ts

#4. Defina a lógica do pipe

Abra o arquivo custom-pipe.pipe.ts e você encontrará este código:

Agora podemos criar uma lógica simples onde nosso canal personalizado é anexado a uma string.

Você pode alterar o conteúdo do seu arquivo para;

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

#5. Registre o pipe personalizado. Abra o arquivo app.module.ts e verifique se você tem @NgModule e depois decorações.

12 software de backup gratuito e de código aberto para manter seus dados seguros

Confirme se este arquivo possui este código;

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]
})

export class AppModule { }

#6. Abra app.component.html, exclua todo o conteúdo e adicione esta linha;

<header>{{ '12345' | customPipe }}</header>

Execute o servidor usando este comando;

servir

Isto é o que será exibido no seu navegador;

Como encadear tubos em Angular

O encadeamento de tubos permite executar várias operações com uma única expressão. Usamos o operador pipe ( | ) para combinar diferentes pipes em Angular.

Podemos encadear tubos pelos seguintes motivos:

Pipes encadeados promovem a reutilização e modularidade do código: você pode configurar cada pipe para executar uma transformação específica que pode ser reutilizada em seu aplicativo.
Mantenha o código limpo: os modelos de encadeamento permitem manter seu código conciso, limpo e legível.
Personalização: O encadeamento de tubos permite combinar tubos personalizados e integrados e personalizá-los para atender às suas necessidades.
Transformações complexas: em vez de definir um canal para realizar múltiplas transformações, você pode configurar vários canais para obter transformações complexas.

Você pode encadear seu tubo personalizado com outro ou com um tubo embutido. Posso encadear o canal que criamos anteriormente customPipe com um canal minúsculo integrado. É assim que podemos fazer:

<p>{{ dataValue | customPipe | lowercase }}</p>

Tubos Puros vs. Impuros

Existem dois tipos de tubos no Angular: tubos puros e impuros

Tubos puros

Pipes em Angular são puros por padrão. Espera-se que um pipe puro retorne a mesma saída para a mesma entrada. Espera-se que tal pipe seja determinístico e sem estado.

O mecanismo de detecção de alterações do Angular otimiza automaticamente tubos puros. Angular não executa novamente a transformação do tubo, a menos que a entrada para um tubo puro seja alterada.

É assim que você declara um cachimbo como puro;

@Pipe({
  name: 'uppercase',
  pure: true

})

export class UppercasePipe {
  transform(value: string): string {
    return value.toUpperCase();
  }
}

Como você pode ver, definimos a propriedade pure do decorador @Pipe como true.

Tubos impuros

Um pipe impuro será executado sempre que o Angular detectar uma alteração. Essa mudança não precisa ser proveniente dos insumos. Pipes impuros se adaptam a situações que exigem acesso ao estado atual do aplicativo. Acessar um banco de dados ou fazer uma solicitação HTTP são exemplos perfeitos de onde você pode usar pipes impuros.

Como digitalizar documentos e adicionar fotos instantaneamente ao Mac usando a câmera Continuity

Este é um exemplo de tubo impuro:

@Pipe({
  name: 'sort',
  pure: false
})

export class SortPipe {
  transform(array: any[]): any[] {
    return array.sort();
  }
}

Como você pode ver, definimos a propriedade pure do decorador @Pipe como false para tornar nosso tubo impuro.

Criando Pipes em Angular: Melhores Práticas

camelCase seus pipes: Se você notou, chamei meu pipe de customPipe. Sempre use essa abordagem se o seu pipe tiver mais de uma palavra.
Teste seus canos: Criar um cano não garante que funcionará. Sempre teste seus tubos para garantir que estejam funcionando conforme o esperado. Você pode automatizar esse processo usando várias bibliotecas.
Evite pipes complexos: você pode querer que um pipe execute mais de uma ação. No entanto, esta não é uma boa abordagem e a prática recomendada é criar canais diferentes para executar ações diferentes.
Use pipes puros: um pipe puro sempre retornará a mesma saída da mesma entrada. Angular pode armazenar em cache resultados para pipes puros, o que resulta em uma melhoria no desempenho e no tempo de resposta.

Perguntas frequentes

Por que precisamos de Pipes em Angular?

Pipes transformam e formatam dados em um aplicativo. Pipes recebem um valor como entrada e retornam um valor transformado como saída. A transformação varia e pode ser tão simples quanto transformar uma moeda ou data ou classificar ou filtrar itens de uma lista.

O que é um tubo personalizado?

Este é um canal definido pelo usuário que você cria para executar transformações personalizadas. Você pode combinar um tubo personalizado com tubos integrados por meio do encadeamento de tubos.

Dê exemplos de pipes integrados no Angular.

DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, DecimalPipe e PercentPipe

O que é encadeamento de tubos?

O encadeamento de tubos é o processo de combinar várias cadeias. O encadeamento de tubos permite executar várias operações com uma única expressão. Usamos o operador pipe ( | ) para combinar diferentes pipes em Angular. Você pode encadear pipes personalizados com outros ou encadeá-los com pipes integrados

Conclusão

Acreditamos que agora você pode descrever pipes em sua próxima entrevista, pois esta é uma pergunta regular nas perguntas mais frequentes do Angular. Também cobrimos os diferentes Pipes integrados e como criar pipes personalizados no Angular.

Pipes personalizados serão úteis quando você quiser atender a necessidades específicas ou tornar seu aplicativo mais dinâmico. No entanto, você deve entender como o Angular funciona nos bastidores para criar e usar pipes personalizados.

Você também pode explorar algumas bibliotecas de UI Angular para criar uma experiência de usuário de classe mundial.