What is an Angular Pipe

Built-in Angular pipes are also used in Angular application.

Angular comes with a stock of pipes such as DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, and PercentPipe. They are all available for use in any template.

Read more about these and many other built-in pipes in the pipes topics of the API Reference; filter for entries that include the word “pipe”.

Angular doesn’t have a FilterPipe or an OrderByPipe for reasons explained in the Appendix of this page.

The | character is used to transform data. Following is the syntax for the same

{{ Welcome to Angular 4 | lowercase}}

It takes integers, strings, arrays, and date as input separated with | to be converted in the format as required and display the same in the browser.

Angular 4 provides some built-in pipes. The pipes are listed below −

Lowercasepipe
Uppercasepipe
Datepipe
Currencypipe
Jsonpipe
Percentpipe
Decimalpipe
Slicepipe

To create a custom pipe, we have created a new ts file. Here, we want to create the sqrt custom pipe. We have given the same name to the file and it looks as follows −
app.sqrt.ts

import {Pipe, PipeTransform} from ‘@angular/core’;
@Pipe ({
name : ‘sqrt’
})
export class SqrtPipe implements PipeTransform {
transform(val : number) : number {
return Math.sqrt(val);
}
}

To create a custom pipe, we have to import Pipe and Pipe Transform from Angular/core. In the @Pipe directive, we have to give the name to our pipe, which will be used in our .html file. Since, we are creating the sqrt pipe, we will name it sqrt.

IT Professionals, Web Developers, web programmers, IT students can use the below links to be updated on Angular 4

• Practice Test for Angular4
• Govt Certification in Angular 4
• Blog posts on Angular 4 and Web Development

Back to Angular 4 Tutorial Main Page