Encadeamento de Pipes no Angular

Para aplicar vários tipos de formatação a um único valor, você pode usar o encadeamento de pipes. Para isso, escrevemos todos os pipes necessários separados pelo símbolo |.

Vamos definir no arquivo da classe do componente principal a propriedade name:

app/app.component.tsexport class AppComponent {
  name: string = 'john d.';
}

No template HTML, vamos escrever a saída do nome do usuário em letras maiúsculas, excluindo a parte da string ' d.':

app/app.component.html<div>{{ name | uppercase | slice:0:4 }}</div>