Um guia abrangente para tubos em Angular

O Angular fornece um recurso poderoso conhecido como “pipes”, que permite aos desenvolvedores manipular dados antes de serem apresentados na interface do usuário. Esses pipes oferecem um nível de flexibilidade inigualável pelos métodos de filtragem tradicionais encontrados em outras linguagens de codificação. Nesta seção, nos aprofundamos na compreensão e utilização desses tubos em um projeto baseado em Angular.

O que são tubos em Angular?

Os Angular Pipes servem como transformadores de dados em aplicativos da Web, imbuindo-os de dinamismo aprimorado, aceitando entradas e gerando saídas processadas. Essas transformações podem variar desde a simplificação de tarefas como formatação de data ou moeda até a execução de operações intrincadas como funções de filtro ou classificação em listas de elementos.

A utilização de pipes dentro dos componentes Angular, bem como seus modelos associados, é uma opção viável para quem busca um meio eficiente de manipulação de dados. Esses pipes oferecem facilidade de implementação, ao mesmo tempo em que permitem a capacidade de concatenar vários pipes para executar operações mais complexas nos referidos dados.

Angular oferece uma variedade de pipes predefinidos, como DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, JsonPipe, SlicePipe e AsyncPipe. Além disso, permite que os desenvolvedores criem seus próprios pipes personalizados para casos de uso específicos.

Angular fornece uma matriz de pipes predefinidos que executam tarefas específicas na manipulação de dados, cada um com sua própria funcionalidade exclusiva. Esses pipes permitem que os desenvolvedores transformem com eficiência as informações para exibição em seus aplicativos.

DatePipe

O DatePipe é um recurso Angular que facilita a formatação e exibição de variáveis ​​de data e hora em um formato específico baseado na localidade do usuário. Esse recurso difere de outras estruturas que exigem a instalação de pacotes JavaScript para manipulação de data e hora. Para incorporar o DatePipe em seu aplicativo, basta anexar o símbolo de barra vertical ( | ) precedido pela palavra “data” juntamente com quaisquer parâmetros relevantes.

Por exemplo:

 <p>Today's date is {{ currentDate | date }}</p>

Neste caso, o valor atual do calendário gregoriano é transmitido por meio da variável currentDate e processado por meio do DatePipe. Esse mecanismo aplica as convenções de formatação padronizadas associadas ao DatePipe à variável acima mencionada. O estabelecimento da variável currentDate ocorre dentro do arquivo TypeScript relevante do componente específico.

Aqui está um exemplo:

 import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  currentDate: any = new Date();
}

Você tem a opção de passar argumentos suplementares para o DatePipe para adaptar o resultado de acordo com seus requisitos.

 <p>Today's date is {{ currentDate | date:'shortDate' }}</p>

O segmento de código mencionado acima forneceu o atributo “shortDate” para o “DatePipe”. Consequentemente, esta diretiva instrui o “DatePipe” a aderir às convenções do estilo de data abreviada. Além da opção “shortDate”, o “DatePipe” pode ser ajustado utilizando uma variedade de especificações alternativas, como “time”, “fullDate” ou padrões de data personalizados como “dd/MM/YY”.

UpperCasePipe e LowerCasePipe

Nossos dois pipes, o UpperCasePipe e o LowerCasePipe, são projetados para realizar transformações de texto para você. Basta utilizar o UpperCasePipe para converter seu texto em maiúsculas ou contar com o LowerCasePipe para alterá-lo para minúsculas.

Para utilizar o UpperCasePipe ou o LowerCasePipe, basta acrescentar um símbolo de barra vertical “|” seguido por"minúsculas"ou"maiúsculas", respectivamente, a fim de empregar efetivamente a funcionalidade de cada tubo respectivo.

Abaixo está uma demonstração sobre a utilização do

 <p>{{ message | uppercase}}</p>
<p>{{ message | lowercase}}</p>

CurrencyPipe

A utilização do CurrencyPipe permite que os usuários apresentem valores numéricos em seus aplicativos como moeda, com formatação personalizada com base na localização ou"localidade"do usuário. Isso é obtido empregando o CurrencyPipe e concatenando-o com a designação da moeda, tudo em um único token.

Por exemplo:

 <p>{{ number | currency }}</p>

O texto fornecido pertence a um componente de software específico conhecido como “CurrencyPipe”, que é capaz de converter valores numéricos em várias formas de moeda. Este processo ocorre automaticamente com configurações padrão que atribuem a conversão para dólares americanos. No entanto, os usuários têm a opção de personalizar a conversão fornecendo parâmetros de entrada suplementares para alterar o tipo de moeda escolhido.

Aqui está um exemplo:

 <p>{{ number | currency: 'GBP' }}</p>

Para facilitar a conversão de um valor numérico para a moeda Libra esterlina britânica (GBP), esse código utiliza o componente CurrencyPipe passando o parâmetro GBP como um argumento. Ao fazer isso, o número é automaticamente convertido para a moeda apropriada para a região especificada.

DecimalPipe e PercentPipe

O DecimalPipe e o PercentPipe são dois utilitários distintos que executam diferentes operações em dados numéricos. O primeiro é projetado para converter valores numéricos em formato decimal, enquanto o último destina-se a converter esses mesmos valores em representações percentuais.

Para utilizar o DecimalPipe, basta empregar o símbolo de barra vertical em conjunto com um valor numérico e quaisquer parâmetros relevantes. Por outro lado, para acessar o PercentPipe, simplesmente substitua o espaço reservado numérico por um símbolo de porcentagem, omitindo quaisquer especificações suplementares.

Por exemplo:

 <p>{{ number | number: '1.2-3' }}</p>
<p>{{ number | percent }}</p>

O componente DecimalPipe aceita parâmetros extras que determinam o número mínimo de dígitos inteiros e fracionários exibidos. Especificamente, o primeiro parâmetro estipula um requisito para pelo menos um dígito de número inteiro. Por outro lado, o segundo parâmetro determina um intervalo entre duas e três casas decimais.

JsonPipe

O componente JsonPipe serve como um utilitário embutido que transforma informações em uma representação de cadeia de caracteres JavaScript Object Notation (JSON), destinada principalmente à depuração de aplicativos. Esta ferramenta versátil pode ser aplicada a objetos individuais e coleções de elementos com facilidade.

A utilização da sintaxe do JsonPipe envolve uma série de etapas, que podem ser resumidas da seguinte forma:

 {{ expression | json }}

Aqui, a expressão representa os dados que precisam ser convertidos em um formato JSON usando a classe JsonPipe. O operador pipe ( | ) atua como um canal para passar a expressão para o JsonPipe para processamento e conversão.

Para demonstrar a utilização de variáveis ​​dentro de um componente funcional ReactJS, vamos considerar um cenário onde definimos um objeto e um array dentro do código do nosso componente. Isso serve como uma ilustração de como os dados podem ser manipulados e acessados ​​por meio do uso dessas construções.

 import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})

export class AppComponent {
  user: data = {
    firstname: "John",
    lastname: "Doe",
  };

  profiles: data[] = [
    {
      firstname: "John",
      lastname: "Doe",
    },
    {
      firstname: "Peter",
      lastname: "Parker",
    },
  ];
}

interface data {
  firstname: string;
  lastname: string;
}

O segmento de código fornecido estabelece uma instância de uma entidade de usuário junto com uma coleção associada de objetos de perfil. Posteriormente, a utilização do

 <p>{{ user | json}}</p>
<p>{{ profiles | json}}</p>

Utilizando o componente JsonPipe, essa implementação transforma a entidade do usuário e sua coleção de perfil associada em uma cadeia de caracteres formatada em JSON para exame conveniente no contexto do desenvolvimento de modelo ou esforços de depuração.

SlicePipe

O SlicePipe tem uma notável semelhança com a amplamente utilizada função slice() do JavaScript, que é conhecida por sua capacidade de formatar conjuntos de dados extraindo seletivamente elementos de arrays e strings para gerar novos arrays ou composições de strings.

Para utilizar a funcionalidade do SlicePipe, emprega-se o símbolo pipe seguido pela palavra-chave “slice” acompanhada por dois índices, representando os pontos inicial e final dentro de uma matriz ou string na qual o processo de extração deve começar e concluir, respectivamente. Especificamente, o índice inicial denota a posição dentro da coleção mencionada a partir da qual o pipe deve começar a recuperar elementos, enquanto o índice final especifica o ponto em que o processo de recuperação deve cessar.

Aqui está uma demonstração de como utilizar a biblioteca SlicePipe:

 <p>{{ string | slice: 0:2}}</p>
<p>{{ array | slice: 0:1}}</p>

O componente SlicePipe em Angular é projetado para recuperar seletivamente porções específicas de dados de uma determinada fonte de entrada. Isso pode ser feito especificando um índice ou intervalo dentro do conjunto de dados fornecido. Por exemplo, se uma string contiver várias substrings, o SlicePipe pode isolar com eficiência o par inicial de caracteres, bem como o primeiro caractere dessa sequência. Além disso, se um array incluir várias entradas, o SlicePipe pode extrair apenas o primeiro elemento sem afetar a integridade dos elementos restantes. No geral, o SlicePipe serve como uma ferramenta valiosa para restringir as informações exibidas nos modelos apenas aos segmentos pertinentes de dados.

AsyncPipe

O AsyncPipe é um pipe Angular pré-construído que lida com a assinatura e cancelamento automático de Observables ou Promises, ao mesmo tempo em que fornece a saída mais recente gerada por tais fluxos em tempo real. Essa funcionalidade simplificada permite um fluxo de dados contínuo em componentes reativos sem exigir intervenção manual para gerenciamento de assinaturas.

A utilização do AsyncPipe requer a adesão a uma sintaxe específica, que pode ser resumida da seguinte forma:

 {{ expression | async }}

Nesse contexto, o termo “expressão” refere-se ao observável ou promessa que se deseja subscrever.

Por exemplo:

 let numbers = of(1, 2, 3, 4, 5);

Pode-se utilizar o AsyncPipe para receber atualizações deste Observable e exibir seu valor mais recente emitido, conforme demonstrado abaixo:

 <p>{{ numbers | async }}</p>

O trecho de código fornecido demonstra um método conciso para recuperar o valor mais recente descarregado por um objeto Observable dentro de um modelo, por meio da utilização do tubo assíncrono do Angular (AsyncPipe). O pipe assina automaticamente o observable ou a promessa na inicialização do componente e libera sua assinatura quando o componente é destruído.

Encadeamento de Canos em Angular

Os pipelines podem ser concatenados conectando vários operadores de pipeline em uma instrução solitária, com o rendimento de cada componente tornando-se a entrada do componente subsequente. Este procedimento permite realizar uma série de modificações em um dado de forma sucinta e direta.

Aqui está a sintaxe básica:

 <p>{{ expression | pipe1 | pipe2 | ... }}</p>

Uma maneira possível de conseguir isso seria utilizar a funcionalidade fornecida pelo DatePipe e UpperCasePipe no Decorator DSL do Angular. Ao compor esses pipes juntos, podemos criar uma transformação dinâmica de um determinado objeto de data em uma representação de string em maiúsculas.

 <p>Today's date is {{ currentDate | date:'shortDate' | uppercase }}</p>

Crie Aplicações Dinâmicas Usando Pipes

O Angular fornece uma matriz de pipes integrados projetados para simplificar o processo de manipulação de dados nos modelos. Esses pipes executam tarefas como formatação de datas ou conversão de moeda, tudo sem exigir codificação extensiva por parte do desenvolvedor. Aproveitando essas ferramentas pré-construídas, os desenvolvedores podem reduzir significativamente a quantidade de código necessária para alcançar os resultados desejados e, ao mesmo tempo, aprimorar a flexibilidade e o dinamismo de seus aplicativos da web.