What is Angular 4 pipes:

1.A pipe is to format the value of an expression displayed in the view.

2.The framework comes with multiple predefined pipes, such as date, currency, lowercase, uppercase, and others.

3.Syntax: {{expression | pipeName:inputParam1}}

4.If the pipe takes multiple inputs, they can be placed one after another separated by a colon

5.Example : {{fullName | slice:0:20}}

6.pipes is that they can be chained, wherein the output from one pipe can serve as the input to another pipe.

7.We can create custom pipes also.

Commonly used pipes

• date: As we just saw, the date filter is used to format the date in a specific manner.
• uppercase and lowercase: These two pipes, as the name suggests, change the case of the string input.
• decimal and percent: decimal and percent pipes are there to format decimal and percentage values based on the current browser locale.
• currency: This is used to format numeric values as a currency based on the current browser locale. {{14.22|currency:”USD” }} {{14.22|currency:”USD”:true}}
• json: This is a handy pipe for debugging that can transform any input into a string using JSON.stringify.

Example of date pipe operator:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  <p>Simple Date is {{ mydate | date }}</p>
  <p>Medium Date is {{ mydate | date: 'medium'}}</p>
  <p>Short Date is {{ mydate | date: 'short'}}</p>
  <p>Full Date is {{ mydate | date: 'fullDate'}}</p>
  <p>Short  Time  is {{ mydate | date:'shortTime'}}</p>
  <p>The custom date is {{mydate | date:'yyyy-mm-dd HH:mm a z':'+0900'}}</p>
  `,
  styles: [`
 p
  {
    background-color:silver;
    font-size : 26px;
  }

  `],


})
export class AppComponent {
   mydate = Date.now();
   }

Angular 5 Online Training