Angular Pipes

“Pipe take a data as a input and transform it into desired output”.

Angular Built-In Pipes

• DatePipe: Formats a date value according to locale rules.
• UpperCasePipe: Transforms text to all upper case.
• LowerCasePipe: Transforms text to all lower case.
• CurrencyPipe: Transforms a number to a currency string, formatted according to locale rules.
• DecimalPipe: Transforms a number into a string with a decimal point, formatted according to locale rules.
• PercentPipe: Transforms a number to a percentage string, formatted according to locale rules.

Example Pipes:

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

@Pipe({
    name: 'capitalize'
})
export class CapitalizePipe implements PipeTransform {
    transform(value: string, _args?: any): any {
        return value.split(' ').map(word => {
            return word.length > 2 ? word[0].toUpperCase() + word.substr(1) : word;
        }).join(' ');
    }
}

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

@Pipe({
    name: 'filter'
})
export class FilterPipe implements PipeTransform {

    transform(items: any[], text: string): any[] {

        if (!items) { return []; }

        if (!text) { return items; }

        text = text.toLowerCase();
        return items.filter(it => {
            return it.toLowerCase().includes(text);
        });
    }
}