{"id":867,"date":"2022-02-02T11:26:17","date_gmt":"2022-02-02T11:26:17","guid":{"rendered":"https:\/\/www.workfall.com\/learning\/blog\/?p=867"},"modified":"2023-04-27T11:44:49","modified_gmt":"2023-04-27T11:44:49","slug":"how-to-create-custom-pipes-in-angular-framework","status":"publish","type":"post","link":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-create-custom-pipes-in-angular-framework\/","title":{"rendered":"Custom Pipes in Angular Framework"},"content":{"rendered":"<span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">6<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span>\n<p><img src=\"https:\/\/lh4.googleusercontent.com\/G9MQaFEgx2FVRn3k9WUd4ZuetKbFkp8kPWyxauecUteeuTHUf0uawM9D1q7G6ghWJDKJnfnfk-o9yCPfVKHSaoR-_TgYx5jdYgGeb8Bjpn_UNkL1SaATR03kxwJ3oQ\" style=\"width: 1600px;\"><\/p>\n\n\n\n<p class=\"has-text-align-justify\">In Angular, pipes are a helpful feature. They&#8217;re a quick and easy way to change values in an Angular template. A pipe accepts one or more values and then returns one or more values.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">Pipes can be used to display strings, currency amounts, dates, and other types of data. Pipes are basic functions that accept an input value and return a transformed value in template expressions. Pipes are important because you may use them throughout your program without having to declare each pipe separately.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">Having the ability to design custom pipelines for your project is a valuable feature in your developer toolbox. It enhances web development efficiency and application speed by maintaining a consistent structure.<\/p>\n\n\n\n<h2>What is an Angular Framework?<\/h2>\n\n\n\n<p class=\"has-text-align-justify\">Angular is an open-source Typescript framework maintained by Google and is actively used to develop single-page applications(SPA). It offers to boost web development efficiency and performance of an application by keeping a consistent structure.<\/p>\n\n\n\n<h2>Features of Angular<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/SL2biMKIbTFy7OAIsPeXo7ockoKOJcDsrplXeJHRS0BpkgfygnCbft1NCEIqE2IG0iLYw5swlTU0ZfVHTQofPnsMlOWj1B6c1pJbfKa38kXcNOfORppIwbuQ9vwFEw\" alt=\"Custom Pipes in Angular \"\/><\/figure>\n\n\n\n<ul><li><strong>Less Code:<\/strong> When doing DOM manipulation, a large number of scripts are required only to create an application. However, when utilizing Angular, a very small amount of code is sufficient for DOM manipulation.<\/li><li><strong>Model View Controller:<\/strong> The angular framework is based on a well-known concept known as Model-View-Controller (MVC). I assume you are all aware that MVC is a design pattern that is utilized in all current online applications.<\/li><li><strong>Unit Testing:<\/strong> The Google development team created an amazing test framework known as Karma. This is quite useful for creating unit tests for AngularJS apps.<\/li><li><strong>Data Model Binding:<\/strong> There is no need for any specific code when tying data to HTML controls. It is feasible to bind data with Angular by just adding a few lines of code.<\/li><li><strong>Desktop Apps:<\/strong> Angular allows you to simply construct desktop programs that can be installed on many operating systems such as Windows, Mac, and Linux.<\/li><li><strong>Virtual Scrolling:<\/strong> Virtual scrolling is mostly used in angular to load and unload elements from the DOM. This method is entirely dependent on visible elements of lists.<\/li><\/ul>\n\n\n\n<h2>What are Angular Pipes?<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/OpaoVm2TNqvmZDW8fQD7Day-kHoZUyQgfsx_4h5JfXcUdwfpA6BqfQ3jtbSRnhtoH4bzAM2EptxRp2zcMmevSHm1gZOlX9HE4WLxZNZykxISQAbUHpbueg7qediKww\" alt=\"Custom Pipes in Angular \"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">Pipes in angular are the simple functions used in the angular template expressions to transform data based on the input value. They are defined by the pipe symbol and can be chained with other pipes. Angular provides multiple inbuilt pipes such as:<\/p>\n\n\n\n<ul><li><strong>UpperCasePipe:<\/strong> Transform text to uppercase<\/li><li><strong>LowerCasePipe:<\/strong> Transfer text to lowercase<\/li><li><strong>CurrencyPipe: <\/strong>Transform a number to a currency string formatted as per the locale rules<\/li><li><strong>DecimalPipe:<\/strong> Transform a number to a string with a decimal point formatted as per the locale rules<\/li><li><strong>PercentPipe: <\/strong>Transform a number to a percentage string formatted as per the locale rules<\/li><li><strong>DatePipe:<\/strong> Formats a date according to the locale rules<\/li><\/ul>\n\n\n\n<h2>Why do we use Pipe in Angular?<\/h2>\n\n\n\n<p class=\"has-text-align-justify\">The pipes in angular are used for data transformation. Angular provides several inbuilt pipes but the data transformation is not possible via the inbuilt pipes angular also provides a way to create a custom pipe.&nbsp;<\/p>\n\n\n\n<h2>What are Angular custom pipes?<\/h2>\n\n\n\n<p class=\"has-text-align-justify\">Custom pipes in angular are created to achieve a functionality that is not supported by the angular framework. It is a custom addition to the inbuilt pipes in the angular framework. The need for custom pipes in angular is to nicely extend our applications with a functionality that is not supported by the inbuilt angular pipes.<\/p>\n\n\n\n<h2>How to create a custom pipe in Angular?<\/h2>\n\n\n\n<p class=\"has-text-align-justify\">Creating a custom pipe in angular is easy as simply have to create a class that implements the PipeTransform interface. Take a look at the below sample class that will guide us on how to create a custom pipe:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&lt;pre&gt;\nimport { Pipe, PipeTransform } from '@angular\/core';  \n\n@Pipe({name: 'Pipename'}) \nexport class Pipeclass implements PipeTransform { \n   transform(parameters): returntype { } \n}\n&lt;\/pre&gt;\n<\/pre><\/div>\n\n\n<p>Where,<\/p>\n\n\n\n<ol><li>&lt;code&gt;Pipename&lt;\/code&gt; represents the name of the pipe<\/li><li>&lt;code&gt;Pipeclass&lt;\/code&gt; represents the name of the class assigned to the custom pipe<\/li><li>&lt;code&gt;transform()&lt;\/code&gt; method represents the function to work with the pipe<\/li><li>&lt;code&gt;parameters&lt;\/code&gt; arguments represent the params which are to be passed to the method<\/li><li>&lt;code&gt;returntype&lt;\/code&gt; represents the return type of the pipe<\/li><\/ol>\n\n\n\n<p class=\"has-text-align-justify\">In other words, creating a custom pipe is divided into 3 parts i.e.<\/p>\n\n\n\n<ol><li>Create a class that implements the PipeTransform interface present in the @angular\/core package<\/li><li>Add a Pipe decorator to the same class<\/li><li>Add the required functionality to the transform(params) method<\/li><\/ol>\n\n\n\n<h2>How to use Angular pipe?<\/h2>\n\n\n\n<p>Using inbuilt or custom pipes in angular is simple. We simply need to follow the basic convention. Take a look at the code snippet below.<\/p>\n\n\n\n<p><code>&lt;pre&gt;{{ variableName | pipeName }}&lt;\/pre&gt;<\/code><\/p>\n\n\n\n<p><strong>Prerequisite<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-justify\">To work on the angular application we will first need to install the node software. You can download the software from this <code>&lt;a href=\"https:\/\/nodejs.org\/en\/download\/\" target=\"_blank\"&gt;link&lt;\/a&gt; <\/code>and run the installer. Follow the setup wizard steps and restart your machine post the successful implementation. Use the following command to verify the nodejs installation.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/fpoCJAQiHCO0omq9uSvJ-J-nhKNjNfrP9Lf-blN2GicC6ezJb2SYXkpDAYliZiq3ZFP6JErX1uQyg9C0CeRu0iiVmohgmzWha-4fBtb2I1pjzw9Xo82lFJdTPzMdaw\" alt=\"\"\/><\/figure>\n\n\n\n<p>This command will show the installed node version upon successful installation.<\/p>\n\n\n\n<h2>Hands-on<\/h2>\n\n\n\n<p class=\"has-text-align-justify\">Now let\u2019s build a small implementation to explore how to create custom tags. In this exercise, we will do the following steps:<\/p>\n\n\n\n<ul><li>Create an Angular project<\/li><li>Create a file that implements the PipeTransform interface<\/li><li>Configure the Custom pipe implementation in the application module<\/li><li>Add the custom pipe implementation in the template<\/li><li>Run the application<\/li><\/ul>\n\n\n\n<p><strong>Create an Angular project<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-justify\">Open the IDE of your choice and open the terminal window. I am using Visual Studio Code as it is easy to set up and offers a lot of customization features.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">Once the terminal window is open enter the following code <code>&lt;code&gt;ng new wf-http-request&lt;\/code&gt; <\/code>in the window to get the application setup running in minutes. If you\u2019re doing it for the first time the setup might take 5-7 minutes depending on your network bandwidth.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/VrZQlBkNfHKH9NR9s3GbuhJ9iOFa4tclgY3jm_78_ZmHVDMs-8Szxi_rRd5hQC9kLh-r7l8skSlqqEpMbJAOdad113nnHUwl9OC0xBLRGxvleKtZHcWyIMo7B2w5eQ\" alt=\"Custom Pipes in Angular \"\/><\/figure>\n\n\n\n<p><strong>Create a file that implements the PipeTransform interface<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-justify\">Create a file named &#8211; <code>&lt;code&gt;temperature-custom-pipe.ts&lt;\/code&gt;<\/code> in the<code> &lt;code&gt;app&lt;\/code&gt; <\/code>folder. The file will be responsible for providing an implementation to the custom pipe responsible for the conversion of an input number to Celsius or Fahrenheit.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh6.googleusercontent.com\/VlbbJEs0k3wHkVatYyADmlC9ysR4YjjzGR7bKUTUhyyORuRsrNSQgMk0zXtUjVIKtaCicOfx0soYOUHw-cMf7NIpsANTZ-YF5Dhvi_hIg2PgGtmMsx_faMGpyAw_DQ\" alt=\"Custom Pipes in Angular \"\/><\/figure>\n\n\n\n<p><strong>Configure the Custom pipe implementation in the application module<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-justify\">Update the app module file to add the custom pipe configuration. Remember that the app module works as an entry point for any angular application.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh4.googleusercontent.com\/6Z27Zh6-987Mh3kS-bF9jt6nMbHNMtsPjplQgs8FHPVMvl48wPTxjjzGjak6_EmbYLYerhdkIpB5jzeZrscVGfYunatGf5i_qxZso47ngiPzS_v8VIlNRKs5-mAbdQ\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>Add the custom pipe implementation in the template<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-justify\">To play around with the custom pipe make changes to the templates so that the application offers a playground for you. Take a look at the below code and update accordingly. Make a note to declare the <code>&lt;code&gt;fahrenheit&lt;\/code&gt;<\/code> and <code>&lt;code&gt;celsius&lt;\/code&gt; <\/code>variables in the <code>&lt;code&gt;app.component.ts&lt;\/code&gt; <\/code>file.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh5.googleusercontent.com\/smv6IZPOS2SQeQgUVXFPfnZnBa5gCsvsJY9KjAZbaFw2qMg75HIrg6AzgH1ithGt6uuroDkkE9jO81xN_Tljw182DL6jnxw6ogKKEFobNF1pe8Xf8apSJaJs0RvOJw\" alt=\"Custom Pipes in Angular \"\/><\/figure>\n\n\n\n<p><strong>Run the application<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-justify\">Running the application is very easy. Navigate to the terminal and from the project root directory trigger the following command &#8211; <code>&lt;code&gt;ng server -o&lt;\/code&gt;<\/code>. The command will be responsible to build the angular project and open the application in the browser on port number 4200.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/lh3.googleusercontent.com\/FIvUBXNnD4X95VYWKJOv-Sd0cZWjti1n3kOOFydIws51KiX611_Jia45dbjYoXa_eOl5fxrm2s1R-9HTPqS727MfYlV2p9LppKIpv3Y9yoRBOk2GLEPGWgbE4SAg8w\" alt=\"Custom Pipes in Angular \"\/><\/figure>\n\n\n\n<p class=\"has-text-align-justify\">Once the application is displayed in the browser of your choice you can play around with the input textbox. The custom pipe created in this blog will be responsible for converting the given temperature into Fahrenheit or Celsius.<\/p>\n\n\n\n<p class=\"has-text-align-justify\">To practice this implementation on your system, use the following URL to get the sample angular project, and to download the project on your local PC, use the git clone command.<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/workfall\/angular-custom-pipes\">https:\/\/github.com\/workfall\/angular-custom-pipes<\/a><\/p>\n\n\n\n<h2>Conclusion<\/h2>\n\n\n\n<p class=\"has-text-align-justify\">In this blog, we demonstrated angular pipes and how the ability to design custom pipelines for projects is a valuable feature in your developer toolbox. We saw how the Angular framework enhances web development efficiency and application speed by maintaining a consistent structure. At last, we built the full implementation of creating custom pipes in an angular application. Stay tuned to keep getting all updates about our upcoming new blogs on different technologies.<\/p>\n\n\n\n<p>Meanwhile\u2026<\/p>\n\n\n\n<p><strong>Keep Exploring -&gt; Keep Learning -&gt; Keep Mastering<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-justify\">This blog is part of our effort towards building a knowledgeable and kick-ass tech community. At <a href=\"https:\/\/www.workfall.com\/\">Workfall<\/a>, we strive to provide the best tech and pay opportunities to AWS-certified talents. If you\u2019re looking to work with global clients, build kick-ass products while making big bucks doing so, give it a shot at <a href=\"https:\/\/www.workfall.com\/partner\/\">workfall.com\/partner<\/a> today.<\/p>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\">6<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span> In Angular, pipes are a helpful feature. They&#8217;re a quick and easy way to change values in an Angular template. A pipe accepts one or more values and then returns one or more values. Pipes can be used to display strings, currency amounts, dates, and other types of data. Pipes are basic functions that accept [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":868,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"spay_email":""},"categories":[289],"tags":[100,256,255,254,55,6],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Custom Pipes in Angular Framework - The Workfall Blog<\/title>\n<meta name=\"description\" content=\"Creating custom pipes in angular is easy as simply have to create a class that implements the PipeTransform interface.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-create-custom-pipes-in-angular-framework\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Custom Pipes in Angular Framework - The Workfall Blog\" \/>\n<meta property=\"og:description\" content=\"Creating custom pipes in angular is easy as simply have to create a class that implements the PipeTransform interface.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-create-custom-pipes-in-angular-framework\/\" \/>\n<meta property=\"og:site_name\" content=\"The Workfall Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/workfall\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-02T11:26:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-27T11:44:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/02\/Cover-Images_Part2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@workfall\" \/>\n<meta name=\"twitter:site\" content=\"@workfall\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Workfall\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#organization\",\"name\":\"Workfall - Hire #Kickass Coders On Demand\",\"url\":\"https:\/\/learning.workfall.com\/learning\/blog\/\",\"sameAs\":[\"https:\/\/www.instagram.com\/workfall\/\",\"https:\/\/www.linkedin.com\/company\/workfall\/\",\"https:\/\/facebook.com\/workfall\",\"https:\/\/twitter.com\/workfall\"],\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/i1.wp.com\/18.141.20.153\/learning\/blog\/wp-content\/uploads\/2021\/10\/cropped-WF_logo.png?fit=400%2C400\",\"contentUrl\":\"https:\/\/i1.wp.com\/18.141.20.153\/learning\/blog\/wp-content\/uploads\/2021\/10\/cropped-WF_logo.png?fit=400%2C400\",\"width\":400,\"height\":400,\"caption\":\"Workfall - Hire #Kickass Coders On Demand\"},\"image\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#website\",\"url\":\"https:\/\/learning.workfall.com\/learning\/blog\/\",\"name\":\"The Workfall Blog\",\"description\":\"#Tech #Remote #Jobs\",\"publisher\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/learning.workfall.com\/learning\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-create-custom-pipes-in-angular-framework\/#primaryimage\",\"url\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/02\/Cover-Images_Part2.png\",\"contentUrl\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/02\/Cover-Images_Part2.png\",\"width\":1200,\"height\":628,\"caption\":\"Custom Pipes in Angular Framework - Workfall\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-create-custom-pipes-in-angular-framework\/#webpage\",\"url\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-create-custom-pipes-in-angular-framework\/\",\"name\":\"Custom Pipes in Angular Framework - The Workfall Blog\",\"isPartOf\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-create-custom-pipes-in-angular-framework\/#primaryimage\"},\"datePublished\":\"2022-02-02T11:26:17+00:00\",\"dateModified\":\"2023-04-27T11:44:49+00:00\",\"description\":\"Creating custom pipes in angular is easy as simply have to create a class that implements the PipeTransform interface.\",\"breadcrumb\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-create-custom-pipes-in-angular-framework\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-create-custom-pipes-in-angular-framework\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-create-custom-pipes-in-angular-framework\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/learning.workfall.com\/learning\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Custom Pipes in Angular Framework\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-create-custom-pipes-in-angular-framework\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-create-custom-pipes-in-angular-framework\/#webpage\"},\"author\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/cab8236044692bc5b27606b13167794a\"},\"headline\":\"Custom Pipes in Angular Framework\",\"datePublished\":\"2022-02-02T11:26:17+00:00\",\"dateModified\":\"2023-04-27T11:44:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-create-custom-pipes-in-angular-framework\/#webpage\"},\"wordCount\":1322,\"publisher\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/how-to-create-custom-pipes-in-angular-framework\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/02\/Cover-Images_Part2.png\",\"keywords\":[\"angular\",\"custompipes\",\"frontend\",\"typescript\",\"webdevelopment\",\"workfall\"],\"articleSection\":[\"Frontend Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/cab8236044692bc5b27606b13167794a\",\"name\":\"Workfall\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/09\/avatar_user_1_1693914404-96x96.png\",\"contentUrl\":\"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/09\/avatar_user_1_1693914404-96x96.png\",\"caption\":\"Workfall\"},\"sameAs\":[\"https:\/\/www.workfall.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Custom Pipes in Angular Framework - The Workfall Blog","description":"Creating custom pipes in angular is easy as simply have to create a class that implements the PipeTransform interface.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-create-custom-pipes-in-angular-framework\/","og_locale":"en_US","og_type":"article","og_title":"Custom Pipes in Angular Framework - The Workfall Blog","og_description":"Creating custom pipes in angular is easy as simply have to create a class that implements the PipeTransform interface.","og_url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-create-custom-pipes-in-angular-framework\/","og_site_name":"The Workfall Blog","article_publisher":"https:\/\/facebook.com\/workfall","article_published_time":"2022-02-02T11:26:17+00:00","article_modified_time":"2023-04-27T11:44:49+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/02\/Cover-Images_Part2.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@workfall","twitter_site":"@workfall","twitter_misc":{"Written by":"Workfall","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/learning.workfall.com\/learning\/blog\/#organization","name":"Workfall - Hire #Kickass Coders On Demand","url":"https:\/\/learning.workfall.com\/learning\/blog\/","sameAs":["https:\/\/www.instagram.com\/workfall\/","https:\/\/www.linkedin.com\/company\/workfall\/","https:\/\/facebook.com\/workfall","https:\/\/twitter.com\/workfall"],"logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/i1.wp.com\/18.141.20.153\/learning\/blog\/wp-content\/uploads\/2021\/10\/cropped-WF_logo.png?fit=400%2C400","contentUrl":"https:\/\/i1.wp.com\/18.141.20.153\/learning\/blog\/wp-content\/uploads\/2021\/10\/cropped-WF_logo.png?fit=400%2C400","width":400,"height":400,"caption":"Workfall - Hire #Kickass Coders On Demand"},"image":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/logo\/image\/"}},{"@type":"WebSite","@id":"https:\/\/learning.workfall.com\/learning\/blog\/#website","url":"https:\/\/learning.workfall.com\/learning\/blog\/","name":"The Workfall Blog","description":"#Tech #Remote #Jobs","publisher":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/learning.workfall.com\/learning\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-create-custom-pipes-in-angular-framework\/#primaryimage","url":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/02\/Cover-Images_Part2.png","contentUrl":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/02\/Cover-Images_Part2.png","width":1200,"height":628,"caption":"Custom Pipes in Angular Framework - Workfall"},{"@type":"WebPage","@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-create-custom-pipes-in-angular-framework\/#webpage","url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-create-custom-pipes-in-angular-framework\/","name":"Custom Pipes in Angular Framework - The Workfall Blog","isPartOf":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-create-custom-pipes-in-angular-framework\/#primaryimage"},"datePublished":"2022-02-02T11:26:17+00:00","dateModified":"2023-04-27T11:44:49+00:00","description":"Creating custom pipes in angular is easy as simply have to create a class that implements the PipeTransform interface.","breadcrumb":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-create-custom-pipes-in-angular-framework\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/learning.workfall.com\/learning\/blog\/how-to-create-custom-pipes-in-angular-framework\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-create-custom-pipes-in-angular-framework\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/learning.workfall.com\/learning\/blog\/"},{"@type":"ListItem","position":2,"name":"Custom Pipes in Angular Framework"}]},{"@type":"Article","@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-create-custom-pipes-in-angular-framework\/#article","isPartOf":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-create-custom-pipes-in-angular-framework\/#webpage"},"author":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/cab8236044692bc5b27606b13167794a"},"headline":"Custom Pipes in Angular Framework","datePublished":"2022-02-02T11:26:17+00:00","dateModified":"2023-04-27T11:44:49+00:00","mainEntityOfPage":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-create-custom-pipes-in-angular-framework\/#webpage"},"wordCount":1322,"publisher":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/#organization"},"image":{"@id":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-create-custom-pipes-in-angular-framework\/#primaryimage"},"thumbnailUrl":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/02\/Cover-Images_Part2.png","keywords":["angular","custompipes","frontend","typescript","webdevelopment","workfall"],"articleSection":["Frontend Development"],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/cab8236044692bc5b27606b13167794a","name":"Workfall","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/learning.workfall.com\/learning\/blog\/#\/schema\/person\/image\/","url":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/09\/avatar_user_1_1693914404-96x96.png","contentUrl":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/09\/avatar_user_1_1693914404-96x96.png","caption":"Workfall"},"sameAs":["https:\/\/www.workfall.com"]}]}},"jetpack_featured_media_url":"https:\/\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/02\/Cover-Images_Part2.png","jetpack-related-posts":[{"id":1402,"url":"https:\/\/learning.workfall.com\/learning\/blog\/standalone-components-in-angular-14\/","url_meta":{"origin":867,"position":0},"title":"Create & Use Standalone Components in Angular 14","date":"October 10, 2022","format":false,"excerpt":"App development is now super-simple and quicker with the new features including standalone components in Angular 14. Because of the standalone components, the use of NgModules has now become optional. The Angular developer community strives to provide web developers with better versions of the TypeScript-based framework while also allowing them\u2026","rel":"","context":"In &quot;Frontend Development&quot;","img":{"alt_text":"How to Create & Use Standalone Components in Angular 14?","src":"https:\/\/i0.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/10\/Cover-Images_Part2-2.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":870,"url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-use-httpclient-in-angular\/","url_meta":{"origin":867,"position":1},"title":"How to use HttpClient in Angular?","date":"February 8, 2022","format":false,"excerpt":"To download or upload data and access other back-end services, most front-end applications must communicate with a server using the HTTP protocol. The HttpClient service class in @angular\/common\/http provides an Angular application with an HTTP client API. The HttpClient is a lightweight, easy-to-use, and robust HTTP client library. It allows\u2026","rel":"","context":"In &quot;Frontend Development&quot;","img":{"alt_text":"How To Use HttpClient in Angular - Workfall","src":"https:\/\/i1.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/02\/Cover-Images_Part2-2.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":2398,"url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-plot-the-heatmap-charts-in-angular\/","url_meta":{"origin":867,"position":2},"title":"How to Plot the Heatmap Charts in Angular?","date":"August 8, 2023","format":false,"excerpt":"A heatmap chart is a visual representation of data presented in a matrix format. It uses different colors to represent the magnitude of values, making it easy to identify patterns and trends within complex datasets. Warm colors depict higher values, while cooler colors indicate lower ones. This type of chart\u2026","rel":"","context":"In &quot;Frontend Development&quot;","img":{"alt_text":"How to Plot the Heatmap Charts in Angular?","src":"https:\/\/i1.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/08\/Cover-Images_Part2-1-1.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":902,"url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-plot-bar-charts-in-angular-using-npm-package-highcharts\/","url_meta":{"origin":867,"position":3},"title":"How to plot Bar Charts in Angular using npm package Highcharts?","date":"April 12, 2022","format":false,"excerpt":"Highcharts have been around since 2009 helping IT professionals, deep tech aficionados, and even recent graduates to present data in a user-friendly manner.\u00a0 It is basically a complex word for charts used by developers while in the development stage of web applications. It comes with extensive documentation, high responsiveness, and\u2026","rel":"","context":"In &quot;Frontend Development&quot;","img":{"alt_text":"Plot Bar Charts in Angular JS","src":"https:\/\/i1.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/04\/Cover-Images_Part2-1.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":2337,"url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-handle-authentication-in-angular-spas\/","url_meta":{"origin":867,"position":4},"title":"How to Handle Authentication in Angular SPAs?","date":"May 30, 2023","format":false,"excerpt":"Angular is a good framework for creating Single Page Applications (SPAs) using JavaScript\/TypeScript. With Single Page Applications, routing is handled on the client side. This calls for protecting routes on the client side as well. Angular comes with the Angular Routing module which handles routing. Sometimes you will have protected\u2026","rel":"","context":"In &quot;Frontend Development&quot;","img":{"alt_text":"How to Handle Authentication in Angular SPAs?","src":"https:\/\/i1.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2023\/05\/Cover-Images_Part2-2.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1015,"url":"https:\/\/learning.workfall.com\/learning\/blog\/how-to-enhance-ux-by-managing-api-requests-using-angular-resolver\/","url_meta":{"origin":867,"position":5},"title":"How to enhance UX by managing API requests using Angular Resolver?","date":"June 28, 2022","format":false,"excerpt":"It might be challenging at times to build Angular applications. This could be caused by flaws that later have an impact on the user experience or by delayed server answers following API calls. If real-time apps are developed that involve numerous server requests or calls, the user experience could suffer.\u2026","rel":"","context":"In &quot;Frontend Development&quot;","img":{"alt_text":"Enhance UX by Angular Resolver","src":"https:\/\/i1.wp.com\/learning.workfall.com\/learning\/blog\/wp-content\/uploads\/2022\/06\/Cover-Images_Part2-1-1.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/posts\/867"}],"collection":[{"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/comments?post=867"}],"version-history":[{"count":4,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/posts\/867\/revisions"}],"predecessor-version":[{"id":1772,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/posts\/867\/revisions\/1772"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/media\/868"}],"wp:attachment":[{"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/media?parent=867"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/categories?post=867"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learning.workfall.com\/learning\/blog\/wp-json\/wp\/v2\/tags?post=867"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}