{"id":59814,"date":"2018-05-03T11:23:30","date_gmt":"2018-05-03T05:53:30","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=59814"},"modified":"2024-04-12T14:20:48","modified_gmt":"2024-04-12T08:50:48","slug":"what-is-a-angular-pipe","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/what-is-a-angular-pipe\/","title":{"rendered":"What is an Angular Pipe"},"content":{"rendered":"

What is an Angular Pipe<\/h1>\n

Built-in Angular pipes are also used in Angular application.<\/p>\n

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

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”.<\/p>\n

Angular doesn’t have a FilterPipe or an OrderByPipe for reasons explained in the Appendix of this page.<\/p>\n

The | character is used to transform data. Following is the syntax for the same<\/p>\n

{{ Welcome to Angular 4 | lowercase}}<\/p>\n

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.<\/p>\n

Angular 4 provides some built-in pipes. The pipes are listed below \u2212<\/p>\n

Lowercasepipe
\nUppercasepipe
\nDatepipe
\nCurrencypipe
\nJsonpipe
\nPercentpipe
\nDecimalpipe
\nSlicepipe<\/p>\n

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 \u2212
\napp.sqrt.ts<\/p>\n

import {Pipe, PipeTransform} from ‘@angular\/core’;
\n@Pipe ({
\nname : ‘sqrt’
\n})
\nexport class SqrtPipe implements PipeTransform {
\ntransform(val : number) : number {
\nreturn Math.sqrt(val);
\n}
\n}<\/p>\n

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.<\/p>\n

\"\"<\/a><\/p>\n

IT Professionals, Web Developers, web programmers, IT students can use the below links to be updated on Angular 4<\/p>\n