Um guia abrangente para tubos em Angular

Pipes em Angular permitem que os usuários transformem dados antes de serem exibidos na exibição. Os pipes são semelhantes aos filtros em outras linguagens de programação, mas são mais flexíveis e podem ser personalizados para atender a necessidades específicas. Aqui, você explorará como usar tubos em seu aplicativo Angular.

O que são tubos em Angular?

Pipes angulares são transformadores de dados que tornam seu aplicativo mais dinâmico. Eles pegam um valor como entrada e retornam um valor transformado como saída. A transformação de dados pode ser tão simples quanto formatar uma data ou moeda, ou tão complexa quanto filtrar ou classificar uma lista de itens.

Você pode usar os tubos em seus componentes Angular e seus modelos. Pipes são fáceis de usar e você pode encadeá-los para criar transformações mais complexas.

Angular fornece vários tubos integrados, incluindo DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe

, DecimalPipe, PercentPipe, JsonPipeGenericName, SlicePipe, e AsyncPipe. Ele também fornece a funcionalidade para criar pipes personalizados.

Cada tubo Angular embutido executa uma função única e pode ajudá-lo a transformar dados.

DatePipe

O DatePipe formatos e exibições suas variáveis ​​de data e hora em um formato especificado, considerando sua localidade. Ao contrário de outros frameworks que requerem Pacotes JavaScript para formatar data e hora, Angular usa o DatePipe. Usar DatePipe em seu aplicativo, adicione o símbolo de barra vertical (|) seguido de data e quaisquer parâmetros adicionais.

Por exemplo:

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

Neste exemplo, você passa o data atual variável através do DatePipe, que o formata de acordo com o formato de data padrão. Você define o data atual variável no arquivo TypeScript do seu componente.

Aqui está um exemplo:

import { Component } from'@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss']
})
exportclass AppComponent {
 currentDate: any = newDate();
}

Você também pode passar parâmetros adicionais para o DatePipe para personalizar a saída:

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

O bloco de código acima passou o encontro curto parâmetro para o DatePipe. Isso diz ao DatePipe para formatar a data usando o formato de data abreviada. Ao lado do encontro curto parâmetro, você pode configurar o DatePipe usando vários parâmetros, incluindo z, data longae formatos de data personalizados, como dd/MM/AA.

UpperCasePipe e LowerCasePipe

O UpperCasePipe e LowerCasePipe transforme seus textos. Você transforma seus textos em maiúsculas usando o UpperCasePipe e minúscula usando o LowerCasePipe.

Para usar o UpperCasePipe e LowerCasePipe, adicione o símbolo de barra vertical (|) seguido de minúsculas usar o LowerCasePipe ou maiúsculo usar o UpperCasePipe.

Abaixo está um exemplo de como usar o UpperCasePipe e LowerCasePipe:

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

CurrencyPipe

Usando o CurrencyPipe, você pode formatar números para uma moeda em seu aplicativo. O CurrencyPipe formata os números de acordo com sua localidade. Para formatar seus números usando o CurrencyPipe, use o símbolo de barra vertical seguido de moeda.

Por exemplo:

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

Neste exemplo, o CurrencyPipe converte a variável de número em uma moeda. Por padrão, o CurrencyPipe converte variáveis ​​em dólares. Para mudar isso, você pode configurar o CurrencyPipe para converter para outras moedas passando parâmetros adicionais.

Aqui está um exemplo:

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

Aqui você passa o GBP parâmetro para o CurrencyPipe. Isso garante que o número a variável é convertida para a moeda da Libra Esterlina.

DecimalPipe e PercentPipe

O DecimalPipe transforma seus números em decimais, enquanto o PercentPipe converte seus números em porcentagens.

Para usar o DecimalPipe, use o símbolo de barra vertical seguido de número e parâmetros adicionais. Para usar o PercentPipe, faça o mesmo, mas substitua o número com por cento sem parâmetros adicionais.

Por exemplo:

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

Os parâmetros adicionais passados ​​para o DecimalPipe controlar o número de dígitos inteiros e fracionários exibidos. O 1 O parâmetro especifica que deve haver pelo menos um dígito inteiro. Em comparação, o 2.3 O parâmetro especifica que deve haver pelo menos dois e até três dígitos fracionários.

JsonPipeGenericName

O JsonPipeGenericName é um canal interno que converte dados em um formato de string JSON. É usado principalmente para fins de depuração. Você pode usar o JsonPipeGenericName tanto em objetos quanto em arrays.

A sintaxe para usar o JsonPipeGenericName é o seguinte:

{{ expression | json }}

Aqui, expressão são os dados que você deseja converter no formato JSON. O operador pipe (|) aplica o JsonPipeGenericName à expressão.

Por exemplo, defina um objeto e uma matriz em seu componente:

import { Component } from"@angular/core";
@Component({
 selector: "app-root",
 templateUrl: "./app.component.html",
 styleUrls: ["./app.component.scss"],
})
exportclass AppComponent {
 user: data = {
 firstname: "John",
 lastname: "Doe",
 };
 profiles: data[] = [
 {
 firstname: "John",
 lastname: "Doe",
 },
 {
 firstname: "Peter",
 lastname: "Parker",
 },
 ];
}
interface data {
 firstname: string;
 lastname: string;
}

O bloco de código acima define um do utilizador objeto e um perfis variedade. Agora, você pode usar o JsonPipeGenericName para converter o objeto e a matriz em JSON.

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

Aqui o JsonPipeGenericName vai converter o do utilizador objeto e o perfis array em uma string JSON, que você pode inspecionar rapidamente em seus modelos durante o desenvolvimento ou depuração.

SlicePipe

O SlicePipe é muito semelhante ao JavaScript fatiar() método. O SlicePipe formata arrays ou strings extraindo seus elementos para criar novos arrays ou strings.

Para usar o SlicePipe, você usa o símbolo de pipe seguido por fatiar e dois parâmetros, os índices inicial e final. O índice inicial é a posição no array ou string onde o pipe começará a extrair elementos, e o índice final é onde o pipe parará de extrair elementos.

Aqui está um exemplo de como usar o SlicePipe:

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

Neste exemplo, o SlicePipe extrairá os dois primeiros elementos do corda variável, o elemento no índice 0 e o elemento no índice 1. Além disso, ele extrairá o primeiro elemento do variedade variável. O SlicePipe é útil quando você deseja exibir apenas uma parte dos dados no modelo.

AsyncPipe

AsyncPipe é um canal Angular integrado que se inscreve e cancela automaticamente a assinatura de um Observable ou Promise. Ele retorna o último valor emitido pelo Observable ou Promise.

A sintaxe para usar AsyncPipe é o seguinte:

{{ expression | async }}

Aqui, a expressão é o Observable ou Promise que você deseja assinar.

Por exemplo:

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

Você pode usar AsyncPipe para se inscrever neste Observable e exibir o último valor emitido como este:

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

Este bloco de código produzirá o último número emitido pelo Observable. AsyncPipe é muito útil ao lidar com operações assíncronas em seus modelos. Ele se inscreve automaticamente no Observable ou Promise quando o componente inicializa e cancela a inscrição quando é destruído.

Encadeamento de Tubos em Angular

Você pode encadear pipes para executar várias transformações em uma única expressão. Encadear pipes é tão simples quanto usar vários operadores de pipe (|) em uma única expressão. A saída de cada tubo torna-se a entrada para o próximo.

Aqui está a sintaxe básica:

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

Por exemplo, você pode transformar um objeto de data em uma string usando o DatePipe e, em seguida, converta essa string para letras maiúsculas usando o UpperCasePipe.

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

Criar aplicativos dinâmicos usando pipes

Pipes são um recurso poderoso no Angular que permite transformar dados antes de serem exibidos na exibição. Aqui, você aprendeu sobre os vários pipes integrados que o Angular oferece, como DatePipe, CurrencyPipe, UpperCasePipe, etc. Você também aprendeu como usá-los em seu aplicativo para criar um conteúdo mais dinâmico. Usando pipes, os desenvolvedores podem criar aplicativos da Web mais flexíveis e dinâmicos com menos código.