{"id":742,"date":"2018-01-26T01:54:00","date_gmt":"2018-01-26T01:54:00","guid":{"rendered":"https:\/\/staging.infragistics.com\/blogs\/?p=742"},"modified":"2025-02-20T08:15:47","modified_gmt":"2025-02-20T08:15:47","slug":"custom-pipe-in-angular","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/custom-pipe-in-angular","title":{"rendered":"Step by Step: Creating Custom Pipe in Angular"},"content":{"rendered":"\n<p>Angular pipes take data as input and transform it to your desired output. For example, using interpolation you are displaying name of the product. Now you want the product name always displayed in the uppercase. You can do this using Angular pipe <strong>uppercase<\/strong>.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import\u00a0{\u00a0Component,\u00a0OnInit\u00a0}\u00a0from\u00a0'@angular\/core';\n \n@Component({\n\u00a0\u00a0\u00a0\u00a0selector:\u00a0'app-root',\n\u00a0\u00a0\u00a0\u00a0template:\u00a0`{{productName\u00a0|\u00a0uppercase}}`\n})\nexport\u00a0class\u00a0AppComponent\u00a0{\n\u00a0\u00a0\u00a0\u00a0productName\u00a0=\u00a0'Cricket\u00a0Bat';\n}<\/pre>\n\n\n\n<p>In above component, productName will be displayed in uppercase. Therefore, pipe takes an input and transforms it into desired output as shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/3618.img1.png\" alt=\" In above component, productName will be displayed in uppercase. Therefore, pipe takes an input and transforms it into desired output as shown\" title=\"In above component, productName will be displayed in uppercase. Therefore, pipe takes an input and transforms it into desired output as shown\"\/><\/figure>\n\n\n\n<p>Angular library provides us many built-in pipes like,<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>UpperCasePipe<\/li>\n\n\n\n<li>LowerCasePipe<\/li>\n\n\n\n<li>CurrencyPipe<\/li>\n\n\n\n<li>PercentPipe<\/li>\n\n\n\n<li>DatePipe etc.<\/li>\n<\/ul>\n\n\n\n<p>&nbsp;Let us see how we could use the built-in currency pipe.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import\u00a0{\u00a0Component,\u00a0OnInit\u00a0}\u00a0from\u00a0'@angular\/core';\n \n@Component({\n\u00a0\u00a0\u00a0\u00a0selector:\u00a0'app-root',\n\u00a0\u00a0\u00a0\u00a0template:\u00a0`{{productName\u00a0|\u00a0uppercase}}\u00a0=\u00a0{{productPrice\u00a0|\u00a0currency}}`\n})\nexport\u00a0class\u00a0AppComponent\u00a0{\n\u00a0\u00a0\u00a0\u00a0productName\u00a0=\u00a0'Cricket\u00a0Bat';\n\u00a0\u00a0\u00a0\u00a0productPrice\u00a0=\u00a0990;\n}<\/pre>\n\n\n\n<p>You can also pass parameters to a pipe using the colon. You can pass input to currency pipe as shown below:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import\u00a0{\u00a0Component,\u00a0OnInit\u00a0}\u00a0from\u00a0'@angular\/core';\n \n@Component({\n\u00a0\u00a0\u00a0\u00a0selector:\u00a0'app-root',\n\u00a0\u00a0\u00a0\u00a0template:\u00a0`{{productName\u00a0|\u00a0uppercase}}\u00a0=\u00a0{{productPrice\u00a0|\u00a0currency:'CAD':'symbol-narrow':'4.2-2'}}`\n})\nexport\u00a0class\u00a0AppComponent\u00a0{\n\u00a0\u00a0\u00a0\u00a0productName\u00a0=\u00a0'Cricket\u00a0Bat';\n\u00a0\u00a0\u00a0\u00a0productPrice\u00a0=\u00a0990;\n}<\/pre>\n\n\n\n<p>Even though Angular provides many default pipes, there could be requirements when you create custom pipes. Creating a custom pipe is very as simple as creating a function. &nbsp;Let us say that we want to create a pipe, which will capitalize first letter of each words in a string.<\/p>\n\n\n\n<p>Consider below component,<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import\u00a0{\u00a0Component,\u00a0OnInit\u00a0}\u00a0from\u00a0'@angular\/core';\n@Component({\n\u00a0\u00a0\u00a0\u00a0selector:\u00a0'app-root',\n\u00a0\u00a0\u00a0\u00a0template:\u00a0`\n\u00a0\u00a0&lt;ul\u00a0*ngFor='let\u00a0n\u00a0of\u00a0names'>\n\u00a0\u00a0\u00a0&lt;li>{{n.name}}&lt;\/li>\n\u00a0\u00a0&lt;\/ul>\n\u00a0\u00a0`\n})\nexport\u00a0class\u00a0AppComponent\u00a0{\n \n\u00a0\u00a0\u00a0\u00a0names\u00a0=\u00a0[];\n\u00a0\u00a0\u00a0\u00a0constructor()\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.names\u00a0=\u00a0this.getNames();\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0getNames()\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return\u00a0[\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\u00a0'name':\u00a0'dhananjay\u00a0Kumar'\u00a0},\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\u00a0'name':\u00a0'jason\u00a0beres'\u00a0},\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\u00a0'name':\u00a0'adam\u00a0jafe'\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0];\n\u00a0\u00a0\u00a0\u00a0}\n}<\/pre>\n\n\n\n<p>This component will print names as below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/2161.img2.png\" alt=\" This component will print names as below\" title=\"This component will print names as below\"\/><\/figure>\n\n\n\n<p>Now we want to capitalize the first letter of each word in the name. To do that we need to write a custom pipe. &nbsp;To create a pipe, you need to follow these steps:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Create a class<\/li>\n\n\n\n<li>Implements PipeTransform in the class<\/li>\n\n\n\n<li>Implement transform function<\/li>\n<\/ol>\n\n\n\n<p>So, you can create a pipe to capitalize first character as shown in the listing below:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import\u00a0{\u00a0Pipe,\u00a0PipeTransform\u00a0}\u00a0from\u00a0'@angular\/core';\n \n@Pipe({\u00a0name:\u00a0'firstcharcateruppercase'\u00a0})\nexport\u00a0class\u00a0FirstCharacterUpperCase\u00a0implements\u00a0PipeTransform\u00a0{\n\u00a0\u00a0\u00a0\u00a0transform(value:\u00a0string,\u00a0args:\u00a0string[]):\u00a0any\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if\u00a0(!value)\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return\u00a0value;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return\u00a0value.replace(\/\\w\\S*\/g,\u00a0function\u00a0(str)\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return\u00a0str.charAt(0).toUpperCase()\u00a0+\u00a0str.substr(1).toLowerCase();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0}\n}<\/pre>\n\n\n\n<p>As you see, custom pipes are nothing but a function which takes input parameters, and returns some value. You need to write all logic of the pipe inside transform method.<\/p>\n\n\n\n<p>To use <strong>firstcharacteruppercase<\/strong> pipe, first you need to declare it in the module, as shown below:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import\u00a0{\u00a0FirstCharacterUpperCase\u00a0}\u00a0from\u00a0'.\/firstcharacteruppercase.pipe'\n \n@NgModule({\n\u00a0\u00a0\u00a0\u00a0declarations:\u00a0[\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0AppComponent,\u00a0FirstCharacterUpperCase\n\u00a0\u00a0\u00a0\u00a0],<\/pre>\n\n\n\n<p>Next on the component, you can use it like below:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import\u00a0{\u00a0Component,\u00a0OnInit\u00a0}\u00a0from\u00a0'@angular\/core';\n@Component({\n\u00a0\u00a0\u00a0\u00a0selector:\u00a0'app-root',\n\u00a0\u00a0\u00a0\u00a0template:\u00a0`\n\u00a0\u00a0&lt;ul\u00a0*ngFor='let\u00a0n\u00a0of\u00a0names'>\n\u00a0\u00a0\u00a0&lt;li>{{n.name\u00a0|\u00a0firstcharcateruppercase}}&lt;\/li>\n\u00a0\u00a0&lt;\/ul>\n\u00a0\u00a0`\n})\nexport\u00a0class\u00a0AppComponent\u00a0{\n \n\u00a0\u00a0\u00a0\u00a0names\u00a0=\u00a0[];\n\u00a0\u00a0\u00a0\u00a0constructor()\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.names\u00a0=\u00a0this.getNames();\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0getNames()\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return\u00a0[\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\u00a0'name':\u00a0'dhananjay\u00a0Kumar'\u00a0},\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\u00a0'name':\u00a0'jason\u00a0beres'\u00a0},\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\u00a0'name':\u00a0'adam\u00a0jafe'\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0];\n\u00a0\u00a0\u00a0\u00a0}\n}<\/pre>\n\n\n\n<p>Now you will get in output the first character of each name in the uppercase.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/2161.img3.png\" alt=\" you will get in output the first character of each name in the uppercase\" title=\"you will get in output the first character of each name in the uppercase\"\/><\/figure>\n\n\n\n<p>To summarize:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Custom pipes are class, which is decorated with @Pipe<\/li>\n\n\n\n<li>Name property of @Pipe decorator defines name of the pipe<\/li>\n\n\n\n<li>Pipe class should implement PipeTransform interface<\/li>\n<\/ol>\n\n\n\n<p>It should implement pipe business logic inside transform method.<\/p>\n\n\n\n<p>There are two types of pipes<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Stateless pipes<\/li>\n\n\n\n<li>Stateful pipes<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/5775.img4.png\" alt=\"There are two types of pipes: Stateless  and Stateful\" title=\"There are two types of pipes: Stateless  and Stateful\"\/><\/figure>\n\n\n\n<p>What we used and created above are stateless pipes. They are pure functions, which takes an input and returns transformed values.<\/p>\n\n\n\n<p>Stateful pipes are complex to implement and they remember state of the data they transform. Usually they create an HTTP request, store the response, and display the output. Angular inbuilt <strong>async<\/strong> pipe is example of stateful pipe. In further posts, we will learn to create custom stateful pipes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"summary\"><strong>Summary <\/strong><\/h2>\n\n\n\n<p>In this post, we learned about pipes in Angular. Pipes transform an input data to desired output. Angular provides many built-in pipes; however, there could be requirements to write custom pipes. There are two types of pipes: stateless pipes and stateful pipes.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Like this post?<\/h4>\n\n\n\n<p>And there you have it! If you like this post, please share it. In addition, if you haven\u2019t checked out&nbsp;<a href=\"\/products\/ignite-ui-angular\">Infragistics Ignite UI for Angular Components<\/a>, be sure to do so! They\u2019ve got 30+ material based Angular components to help you code speedy web apps faster.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.infragistics.com\/products\/ignite-ui-angular\/download\"><img loading=\"lazy\" decoding=\"async\" width=\"650\" height=\"479\" src=\"https:\/\/staging.infragistics.com\/blogs\/wp-content\/uploads\/2018\/08\/ignite-ui-angular-you-get-ad.gif\" alt=\"\" class=\"wp-image-1925\"\/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Angular pipes take data as input and transform it to your desired output. For example, using interpolation you are displaying name of the product. Now you want the product name always displayed in the uppercase. You can do this using Angular pipe uppercase.<\/p>\n","protected":false},"author":65,"featured_media":1572,"comment_status":"publish","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-742","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/742","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=742"}],"version-history":[{"count":5,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/742\/revisions"}],"predecessor-version":[{"id":2025,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/742\/revisions\/2025"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/1572"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=742"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=742"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=742"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}