Angular Pipe

Angular Pipe is used to transform the input data. You can use Pipe throughout your application.

To implement the Angular Pipe use the pipe operator (|).

Angular Pipe is used into the template file like app-component.html file.

There are two types of Pipes.

Pure Pipe:- By default pipe is pure pipe. Angular pure pipe is only called when Angular detects a change in the value or the parameters passed to a pipe.

Impure Pipe:- An impure pipe is called on every change detection cycle in Angular. You can create a impure pipe through change setting pure flag to false.

@Pipe({
  name: 'pipeName',
  pure:  false
})

There are some default Angular Pipes.

1) uppercase Pipe:- Suppose you want your input value in uppercase format then use uppercase pipe.

Syntax:-

{{ Value | uppercase}}

Example:- Suppose You have input value John and you want into uppercase format.

{{ 'John' | uppercase}}

2) lowercase Pipe:- Suppose you want your input value in lowercase format then use lowercase pipe.

Syntax:-

{{ Value | lowercase}}

Example:- Suppose You have input value John and you want into lowercase format

{{ 'John' | lowercase}}

3) titlecase Pipe:- Suppose you want your input value in capitalize format then use titlecase pipe.

Syntax:-

{{ Value | titlecase}}

Example:- Suppose You have input value john and you want into capitalize format

{{ 'john' | titlecase}}

4) Currency Pipe:- Suppose you want to add currency with your input value then use currency pipe.

Syntax:-

{{ Value | currency:'INR':'symbol-narrow'}}

Example:- Suppose You have input value 250 and you want to add indian currency into the value.

{{ 250 | currency:'INR':'symbol-narrow'}}