Pipes provide a very easy way to manipulate data on the client side. It can be used to change the displayed numbers (for currency for example), manipulate strings (uppercase, lowercase, etc) and more. You can also create your custom pipe and use it anywhere easily

 

Simple example:

In the component code declare:

d:Date = new Date();

In the template add:

date is: {{d | date:'dd/MM/yyyy'}}

here we use the date built in pipe with a parameter to determine how exactly we want it to be displayed

 

More examples of built in pipes:

Lets first we create a new type – Book:

export class Book
{
  Id:number;
  Name:string;
  Price:number;
  Rate:number;
}

now add a books array to your component code:

books:Book[] = [
  {
    Id: 10,
    Name: 'book1',
    Price: 100,
    Rate: 3
  },
  {
    Id: 20,
    Name: 'abc',
    Price: 200,
    Rate: 1
  },
  {
    Id: 30,
    Name: 'xyz',
    Price: 150,
    Rate: 5
  },
  {
    Id: 40,
    Name: 'book2',
    Price: 120,
    Rate: 3
  },
];

Add a table to the template:

<table align="center" border='1' width='80%' *ngIf='books && books.length > 0'>
  <tbody>
  <tr *ngFor='let b of books'>
    <td> {{b.Id}} </td>
    <td> {{b.Name }} </td>
    <td> {{b.Price }} </td>
    <td> {{b.Rate}} </td>
  </tr>
  </tbody>
</table>

 

Using some built in pipes:

Change the book name to uppercase:

<td> {{b.Name | uppercase}} </td>

Change the book name to titlecase (only first letter for each word is uppercase):

<td> {{b.Name | titlecase}} </td>

Display the price with currency

<td> {{b.Price | currency}} </td>

Display the price with currency symbol and digit limit

<td> {{b.Price | currency:'USD':true:'1.2-2' }} </td>

see more in Angular reference

 

Creating a custom pipe:

first use the Angular CLI

# ng g p stars

It will create a single file to implement the pipe

@Pipe({
  name: 'simp'
})
export class starsPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return null;
  }

}

now implement the simple transform function:

Change the value parameter type to any type you want and also the return value

For example here we get a string and return a new string with some ‘*’ signs

transform(value: string, args?: any): string {

    return '***' + value + '***';

 }

Now you can apply the new pipe

In the template add:

<td> {{b.Name | stars}} </td>

thats it – to reuse it anywhere you only need to add the source file to the project and add the type name to the declaration section of the module decorator

 

Currency example:

# ng g p mycur

Implementation – Add $ and 2 fixed digit ( 120 ==>  ‘$ 120.00’ )

transform(value: number, args?: any): string {

    return '$ ' + value.toFixed(2) ;

  }

Use it

<td> {{b.Price | mycur }} </td>

 

Adding a parameter

let the user decide how many fixed digit

transform(value: number, digits: number = 2): string {

    return '$ ' + value.toFixed(digits) ;

}

using the pipe:

<td> {{b.Price | mycur:1 }} </td>

 

Creating pipe for a custom type:

# ng g p booksfil

Now we want to manipulate data array – here we filter it but we can also sort , group etc.

transform(value: Book[], filter: string): Book[] {

    return value.filter(b => b.Name.indexOf(filter)>=0);

  }

The pipe works on a Book array and also returns Book array, It gets a filter string as a parameter and filter the array to the books with the substring found in their name

declare in the component code:

fil:string = '';

Add a textbox for the filter:

<input type="text" [(ngModel)]="fil">

Add the pipe to the ngFor statement

<tr *ngFor='let b of books | booksfil:fil'>

 

Adding support for case insensitive

transform(value: Book[], filter: string): Book[] {

    return value.filter(b => b.Name.toLowerCase().

                indexOf(filter.toLowerCase())>=0);

  }

 

You can implement any pipe you want, just declare the input and output types and implement the transform function