Transforme dados com Angular pipes

    Você pode usar os pipes Angular para transformar dados de um valor em outro. Essa técnica é semelhante aos conversores WPF.

    No WPF, para transformar dados de um valor em outro, você usará um IValueConverter. Para transformar dados em uma aplicação Angular, vamos usar um Pipe. O pipe é muito semelhante ao conversor WPF. Ele usa dados como entrada e, em seguida, transforma esses dados em uma saída desejada para exibição.

    Angular fornece vários canais predefinidos para as transformações de dados mais comuns. Por exemplo, se você quiser que um texto de cabeçalho apareça em maiúsculas, poderá usar o UpperCasePipe. Usar um cachimbo é muito simples. Após a expressão, forneça um operador | de pipe seguido pelo nome do pipe.

    <h2>{{ header | uppercase }}</h2>

    O que é realmente ótimo sobre os pipes em Angular em comparação com um conversor WPF é que você pode realmente usar mais de um pipe por vez. Assim, por exemplo, você pode usar um DatePipe e um UpperCasePipe para formatar a data em um formato amigável e torná-la maiúscula:

    <h2>{{ birthday | date | uppercase }}</h2>

    Além disso, também temos a opção de fornecer parâmetros para o tubo. Por exemplo, o DatePipe tem parâmetros como formato, fuso horário e localidade.

    <h2>{{ birthday | date:"MM/dd/yy" }}</h2>

    Create Your Own Pipe

    Além de usar os pipes predefinidos, Angular permite que você defina seus próprios pipes. Vamos dar uma olhada na implementação de um conversor WPF que substitui uma string por outra.

    public class ReplaceConverter : IValueConverter
{
    public string OldValue { get; set; }
    public string NewValue { get; set; }

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var strValue = value.ToString();
        return strValue.Replace(this.OldValue, this.NewValue);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

    <Window.Resources>
    <local:ReplaceConverter OldValue=" " NewValue="-" x:Key="replaceConverter"></local:ReplaceConverter>
</Window.Resources>
<Grid>
    <TextBlock Text="{Binding Path=Name, Mode=OneWay, Converter={StaticResource replaceConverter}}"></TextBlock>
</Grid>

    Para fazer o mesmo no Angular, temos que definir uma classe que implemente a interface PipeTransform e tenha o @Pipe decorador.

    import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'replace'
})
export class ReplacePipe implements PipeTransform {

    transform(value: string, oldValue: string, newValue: string): string {
        return value.replace(oldValue, newValue);
    }
}

    <span>{{ name | replace:" ":"-" }}</span>
    Note

    Observe que, para poder usar o pipe no modelo html do componente, você deve adicioná-lo às declarações do módulo.

    Note

    Uma diferença importante entre o pipe Angular e o conversor do WPF é que o pipe Angular funciona apenas para associação unidirecional, ao contrário do conversor do WPF, que tem o método ConvertBack.

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.