Angular Pipes

Angular Pipes is used to transform data and is denoted by symbol '|'. In AngularJs the same thing is called as a filters.

As a input pipes takes integers, arrays, strings, date separted with the symbol '|'.

Basic Sytax:

{{name | uppercase}}

Pipes are used to transform data as required and display it in a view.

Here are list of pipes that is provided by Angular

Lowercasepipe

Uppercasepipe

Datepipe

Currencypipe

Jsonpipe

Percentpipe

Decimalpipe

Slicepipe

Creating Custom Pipe

For creating custom pipe we need to import Pipe and PipeTransform. Lets create a reverse pipe, this pipe reverses the string .

So to start with create a reverse.pipe.ts file

reverse.pipe.ts

import { Pipe, PipeTransform } from '@angular/core'; /* * * Reverse the string value * Usage: * value | reverse:string * Example: * {{ pixel | reverse }} * */ @Pipe({name: 'reverse'}) export class ReversePipe implements PipeTransform { transform(value: string): string { return value.split("").reverse().join(""); } }

To use this custom pipe import in app.module.ts

app.module.ts

import { ReversePipe } from './reverse.pipe';

Next to use in component, add it in app.component.html

app.component.html

Reverse of string is: {{pixel | reverse}}

Output of the above will be reverse of string.

Reverse of string is: lexip

Back Next