Angular Academy · Aula

Encadeando e parametrizando pipes

Combine pipes e passe argumentos.

Encadeando e parametrizando pipes é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

Passando argumentos para pipes

Os pipes podem aceitar argumentos depois de dois-pontos. O formato é {{ value | pipeName:arg1:arg2 }}. Cada argumento é separado pelos seus próprios dois-pontos.

Um único argumento

Muitos pipes recebem um argumento. Por exemplo, o pipe date recebe uma string de formatação.

<p>{{ today | date:"fullDate" }}</p>
<!-- Saturday, May 30, 2026 -->

Vários argumentos

O pipe slice recebe um índice inicial e um índice final, cada um passado com os seus próprios dois-pontos.

<p>{{ text | slice:0:10 }}</p>
<!-- first 10 characters -->

Argumentos dinâmicos

Os argumentos podem ser propriedades do componente, não apenas literais. Isso permite alterar o comportamento do pipe de forma reativa.

<p>{{ price | currency:currencyCode }}</p>

// component
currencyCode = "GBP";
price = 99;

O que é o encadeamento de pipes?

Você pode encadear pipes para que a saída de um pipe se torne a entrada do próximo. Eles são executados da esquerda para a direita.

<p>{{ name | slice:0:5 | uppercase }}</p>
<!-- slices first, then uppercases -->

Exemplo de encadeamento

Aqui, uma data é formatada e depois convertida para letras maiúsculas. O pipe date é executado primeiro, seguido de uppercase.

<p>{{ today | date:"fullDate" | uppercase }}</p>
<!-- SATURDAY, MAY 30, 2026 -->

A ordem é importante

A ordem dos pipes encadeados altera o resultado. Aplicar uppercase antes de slice ou depois produz o mesmo texto neste caso, mas, com pipes de transformação, a ordem pode fazer muita diferença.

<!-- uppercase then slice -->
{{ "angular" | uppercase | slice:0:3 }}
<!-- ANG -->

<!-- slice then uppercase -->
{{ "angular" | slice:0:3 | uppercase }}
<!-- ANG -->

Combinando argumentos e encadeamento

Você pode combinar argumentos e encadeamento livremente. Cada pipe ainda recebe como valor a saída do pipe anterior.

<p>{{ amount | number:"1.2-2" | slice:0:6 }}</p>

Encadeamento com moeda

Formate um número como moeda e depois remova os espaços extras. Embora seja incomum, isso mostra que os pipes são blocos de construção combináveis.

<p>{{ price | currency:"USD" }}</p>
<!-- $1,234.56 -->

Dicas de legibilidade

Encadeamentos longos de pipes podem prejudicar a legibilidade. Se um encadeamento ficar complexo, considere calcular o valor no componente ou usar um pipe personalizado.

// instead of a long template chain,
// compute in the component:
get displayName(): string {
  return this.name.slice(0, 5).toUpperCase();
}

Espaços ao redor dos pipes

Os espaços ao redor de | e : são opcionais, mas recomendados para melhorar a legibilidade. O Angular ignora espaços em branco extras.

<p>{{ value | date : "short" }}</p>
<!-- equivalent to value|date:"short" -->

Verificação rápida

Teste sua compreensão sobre argumentos e encadeamento de pipes.

Recapitulação

Você aprendeu a passar um ou vários argumentos usando dois-pontos, usar argumentos dinâmicos de propriedades do componente e encadear pipes para que a saída flua da esquerda para a direita.

A seguir, você criará seu próprio pipe personalizado.

Perguntas Frequentes

A aula “Encadeando e parametrizando pipes” é grátis?

Sim — o texto completo de “Encadeando e parametrizando pipes” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “Encadeando e parametrizando pipes”?

Combine pipes e passe argumentos. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Angular Academy?

Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Encadeando e parametrizando pipes”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Angular Academy?

Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Angular Academy