Pipe is used to transform string, currency, date, or any data to display. A pipe is a simple function that can use template expression to accept input value and return transform value.

Angular provides built-in pipes for typical data transformations, including transformations for internationalization (i18n), which use locale information to format data. The following are commonly used built-in pipes for data formatting:

• 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.

Type of pipes:

If we consider the behavior of pipe on primitive and non-primitive data types, there are two types of pipe. Pure and Impure pipe.

Pure pipe:

By default, pipes are defined as pure so that Angular executes the pipe only when it detects a pure change to the input value. A pure change is either a change to a primitive input value (such as String, Number, Boolean, or Symbol), or a changed object reference (such as Date, Array, Function, or Object). Example DatePipe, UpperCasePipe

With a pure pipe, Angular ignores changes within composite objects, such as a newly added element of an existing array, because checking a primitive value or object reference is much faster than performing a deep check for differences within objects. Example AsyncPipe 

Impure pipe:

Impure pipe to detect changes within composite objects such as arrays. Angular executes an impure pipe every time it detects a change with every keystroke or mouse movement.

While an impure pipe can be useful, be careful using one. A long-running impure pipe could dramatically slow down your app.

Pipes and precedence:

The pipe operator has higher precedence than the ternary operator (?:), which means a ? b : c | x is parsed as a ? b : (c | x). The pipe operator cannot be used without parentheses in the first and second operands of ?:.

Due to precedence, if you want a pipe to apply to the result of a ternary, wrap the entire expression in parentheses; for example, (a ? b : c) | x.

Example:

DatePipe – Formats a date value according to locale rules.
Syntax: {{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}

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

@Component({
  selector: 'app-hero-birthday',
  template: `<p>The hero's birthday is {{ birthday | date }}</p>`
})
export class HeroBirthdayComponent {
  birthday = new Date(1988, 3, 15); // April 15, 1988 -- since month parameter is zero-based
}

Also Read : Get day, month and year Difference in JavaScript

Formatting a date:

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

@Component({
  selector: 'app-hero-birthday',
  template: `<p>The hero's birthday is {{ birthday | date:"MM/dd/yy" }} </p>`
})
export class HeroBirthdayComponent {
  birthday = new Date(1988, 3, 15); // April 15, 1988 -- since month parameter is zero-based
}

// output like 4/15/88

Example: Applying two formats by chaining pipes:

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

@Component({
  selector: 'app-hero-birthday',
  template: `<p>The hero's birthday is {{  birthday | date:'fullDate' | uppercase}} </p>`
})
export class HeroBirthdayComponent {
  birthday = new Date(2015, 5, 15); // April 15, 1988 -- since month parameter is zero-based
}

// output like MONDAY, JUNE 15, 2015

References :
Transforming Data Using Pipes
DatePipe