{"id":5395,"date":"2020-11-25T03:02:29","date_gmt":"2020-11-25T03:02:29","guid":{"rendered":"https:\/\/www.digital-web-services.com\/?p=5395"},"modified":"2020-11-25T03:03:42","modified_gmt":"2020-11-25T03:03:42","slug":"an-introduction-to-angular-pipes","status":"publish","type":"post","link":"https:\/\/www.digital-web-services.com\/an-introduction-to-angular-pipes.html","title":{"rendered":"An Introduction to Angular Pipes"},"content":{"rendered":"<p class=\"p1\" style=\"text-align: justify;\">Angular is recognized among the dominating <span class=\"s1\">frontend frameworks used for UI<\/span> development especially because of its features and great performance delivery. In this article, we will shed light on one of the essential topics of Angular i.e., Angular pipe.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_58 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\" role=\"button\"><label for=\"item-65658b9d74d5e\" ><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input aria-label=\"Toggle\" aria-label=\"item-65658b9d74d5e\"  type=\"checkbox\" id=\"item-65658b9d74d5e\"><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.digital-web-services.com\/an-introduction-to-angular-pipes.html\/#What_is_Angular_Pipe\" title=\"What is Angular Pipe?\">What is Angular Pipe?<\/a><ul class='ez-toc-list-level-3'><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.digital-web-services.com\/an-introduction-to-angular-pipes.html\/#Built-in_Pipes\" title=\"Built-in Pipes\">Built-in Pipes<\/a><ul class='ez-toc-list-level-4'><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.digital-web-services.com\/an-introduction-to-angular-pipes.html\/#_%E2%98%9E_Start_Your_Online_Learning_From_Udemy_With_Amazing_Student_Discount_Offers\" title=\"\u00a0\u261e Start Your Online Learning From Udemy With Amazing Student Discount &amp; Offers\">\u00a0\u261e Start Your Online Learning From Udemy With Amazing Student Discount &amp; Offers<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.digital-web-services.com\/an-introduction-to-angular-pipes.html\/#How_to_create_Custom_Pipe_in_Angular\" title=\"How to create Custom Pipe in Angular?\">How to create Custom Pipe in Angular?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.digital-web-services.com\/an-introduction-to-angular-pipes.html\/#What_is_Pipe_Transform\" title=\"What is Pipe Transform?\">What is Pipe Transform?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.digital-web-services.com\/an-introduction-to-angular-pipes.html\/#_Conclusion\" title=\"\u00a0Conclusion\">\u00a0Conclusion<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"p3\" style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"What_is_Angular_Pipe\"><\/span><strong>What is Angular Pipe?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p class=\"p1\" style=\"text-align: justify;\"><a href=\"https:\/\/www.digital-web-services.com\/an-introduction-to-angular-pipes.html\"><strong>Angular pipes<\/strong> <\/a>are used to filter the data and it is denoted by the | symbol. It holds the string, integers, arrays, and date as input separated with |. It transforms the data in the format as needs and displays the same in the browser. It takes data as input and converts it to the desired output. Pipes are very useful because we can use it in the entire application, while only declaring each pipe once. For example, you would use a pipe to show the date as September 15, 1997, instead of the raw string format.<\/p>\n<h3 class=\"p3\" style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Built-in_Pipes\"><\/span>Built-in Pipes<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p class=\"p1\" style=\"text-align: justify;\">Angular Offers built-in pipes for particular data transformation, including transformation for internationalization (i18n), which use locale info for that data. The following are generally used built-in pipes for data transformation.<\/p>\n<ul class=\"ul1\" style=\"text-align: justify;\">\n<li class=\"li1\"><strong>AsyncPipe:<\/strong> Disclose a value from an asynchronous primitive.<\/li>\n<li class=\"li1\"><strong>DatePipe:<\/strong> Transform a date value according to locale rules<\/li>\n<li class=\"li1\"><strong>UpperCasePipe:<\/strong> Convert the text data into the upper case.<\/li>\n<li class=\"li1\"><strong>LowerCasePipe:<\/strong> Transform the text data into a lower case.<\/li>\n<li class=\"li1\"><strong>CurrencyPipe:<\/strong> Transfigure the number to a currency string, Arranged in the format according to locale rules.<\/li>\n<li class=\"li1\"><strong>DecimalPipe:<\/strong> Transform the number into a string with a decimal point, Arranged in the format according to locale rules.<\/li>\n<li class=\"li1\"><strong>PercentagePipe:<\/strong> Transform the number to a percentage string, Arranged in the format according to locale rules.<\/li>\n<li class=\"li1\"><strong>JsonPipe:<\/strong> Transform a value into its JSON (JavaScript Object Notation) format representation. It is useful for debugging.<\/li>\n<li class=\"li1\"><strong>SlicePipe:<\/strong> Creates a new Array or String having a subset(slice) of the elements.<\/li>\n<li class=\"li1\"><strong>TitleCasePipe:<\/strong> Transform the text to title case. Capitalizes the first letter of each word and transforms the other word to lower case. Words are delimited by any whitespace character, like space, tab, or line-feed character.<\/li>\n<\/ul>\n<h4><span class=\"ez-toc-section\" id=\"_%E2%98%9E_Start_Your_Online_Learning_From_Udemy_With_Amazing_Student_Discount_Offers\"><\/span><strong>\u00a0\u261e <span class=\"wpsm-highlight wpsm-highlight-yellow\">Start Your Online Learning From Udemy With Amazing Student Discount &amp; Offers<\/span><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p class=\"p1\" style=\"text-align: justify;\">To understand the functional capability of these built-in pipes, in your app open app.component.ts file and change the file code as per following code:<\/p>\n<p class=\"p12\" style=\"text-align: justify;\"><i>\/\/<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>This<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>method<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>transmits<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>the<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>string<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>value<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>passed<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>as<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>a<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>parameter<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>to<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>the<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>component&#8217;s<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>method<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>after<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>three<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>seconds<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>have<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>passed,<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>using<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>the<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>of<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>and<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>delay<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>methods.<\/i><\/p>\n<p class=\"p8\" style=\"text-align: justify;\"><span class=\"s8\">\u00a0\u00a0<\/span><span class=\"s11\"><b>makeObservable<\/b><\/span><span class=\"s5\">(<\/span>value<span class=\"s5\">:<\/span><span class=\"s8\">\u00a0<\/span>string<span class=\"s5\">):<\/span><span class=\"s8\">\u00a0<\/span><b>Observable<\/b><span class=\"s5\">&lt;<\/span>string<span class=\"s5\">&gt;<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">{<\/span><\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><span class=\"s4\">\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"s3\">return<\/span><span class=\"s4\">\u00a0<\/span><span class=\"s11\"><b>of<\/b><\/span>(<span class=\"s7\">value<\/span>)<span class=\"s5\">.<\/span><span class=\"s11\"><b>pipe<\/b><\/span>(<span class=\"s11\"><b>delay<\/b><\/span>(<span class=\"s10\">3000<\/span>))<span class=\"s5\">;<\/span><\/p>\n<p class=\"p11\" style=\"text-align: justify;\">\u00a0\u00a0<span class=\"s12\">}<\/span><\/p>\n<p class=\"p6\" style=\"text-align: justify;\"><span class=\"s8\">\u00a0\u00a0<\/span><span class=\"s7\">title<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">=<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">&#8216;<\/span>angularPipesDemo<span class=\"s5\">&#8216;;<\/span><\/p>\n<p class=\"p8\" style=\"text-align: justify;\"><span class=\"s8\">\u00a0\u00a0<\/span>dateOfToday<span class=\"s8\">\u00a0<\/span><span class=\"s5\">=<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">new<\/span><span class=\"s8\">\u00a0<\/span><b>Date<\/b><span class=\"s9\">()<\/span><span class=\"s5\">;<\/span><\/p>\n<p class=\"p8\" style=\"text-align: justify;\"><span class=\"s8\">\u00a0\u00a0<\/span>userData<span class=\"s8\">\u00a0<\/span><span class=\"s5\">=<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">{<\/span><span class=\"s8\">\u00a0<\/span>userName<span class=\"s5\">:<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">&#8216;<\/span><span class=\"s6\">Jignesh<\/span><span class=\"s5\">&#8216;,<\/span><span class=\"s8\">\u00a0<\/span>userAge<span class=\"s5\">:<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">&#8216;<\/span><span class=\"s6\">32<\/span><span class=\"s5\">&#8216;,<\/span><span class=\"s8\">\u00a0<\/span>userAddress<span class=\"s5\">:<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">{<\/span><span class=\"s8\">\u00a0<\/span>city<span class=\"s5\">:<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">&#8216;<\/span><span class=\"s6\">Mumbai<\/span><span class=\"s5\">&#8216;,<\/span><span class=\"s8\">\u00a0<\/span>state<span class=\"s5\">:<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">&#8216;<\/span><span class=\"s6\">Maharashtra<\/span><span class=\"s5\">&#8216;<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">}<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">};<\/span><\/p>\n<p class=\"p6\" style=\"text-align: justify;\"><span class=\"s8\">\u00a0\u00a0<\/span><span class=\"s7\">monthName<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">=<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s9\">[<\/span><span class=\"s5\">&#8216;<\/span>Jan<span class=\"s5\">&#8216;,<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">&#8216;<\/span>Feb<span class=\"s5\">&#8216;,<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">&#8216;<\/span>Mar<span class=\"s5\">&#8216;,<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">&#8216;<\/span>April<span class=\"s5\">&#8216;,<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">&#8216;<\/span>May<span class=\"s5\">&#8216;,<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">&#8216;<\/span>Jun<span class=\"s5\">&#8216;,<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">&#8216;<\/span>July<span class=\"s5\">&#8216;,<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">&#8216;<\/span>Sept<span class=\"s5\">&#8216;,<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">&#8216;<\/span>Oct<span class=\"s5\">&#8216;,<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">&#8216;<\/span>Nov<span class=\"s5\">&#8216;,<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">&#8216;<\/span>Dec<span class=\"s5\">&#8216;<\/span><span class=\"s9\">]<\/span><span class=\"s5\">;<\/span><\/p>\n<p class=\"p13\" style=\"text-align: justify;\">}<\/p>\n<p class=\"p1\" style=\"text-align: justify;\">To pass these pipes open app.component.html file and change the file code as per the following code:<\/p>\n<p class=\"p15\" style=\"text-align: justify;\"><i>&lt;!&#8211;<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>This<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>Pipe<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>will<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>convert<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>the<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>data<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>in<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>Upper<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>Case<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>&#8211;&gt;<\/i><\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><span class=\"s14\">&lt;<\/span><span class=\"s3\">h4<\/span><span class=\"s14\">&gt;<\/span>Title<span class=\"s4\">\u00a0<\/span>In<span class=\"s4\">\u00a0<\/span>Uppercase<span class=\"s4\">\u00a0<\/span>using<span class=\"s4\">\u00a0<\/span>uppercase<span class=\"s4\">\u00a0<\/span>pipe<span class=\"s14\">&lt;\/<\/span><span class=\"s3\">h4<\/span><span class=\"s14\">&gt;<\/span><\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><span class=\"s14\">&lt;<\/span><span class=\"s3\">p<\/span><span class=\"s14\">&gt;<\/span>{{title<span class=\"s4\">\u00a0<\/span>|<span class=\"s4\">\u00a0<\/span>uppercase}}<span class=\"s14\">&lt;\/<\/span><span class=\"s3\">p<\/span><span class=\"s14\">&gt;<\/span><\/p>\n<p class=\"p15\" style=\"text-align: justify;\"><i>&lt;!&#8211;<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>This<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>Pipe<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>will<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>convert<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>the<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>data<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>in<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>Lower<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>Case<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>&#8211;&gt;<\/i><\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><span class=\"s14\">&lt;<\/span><span class=\"s3\">h4<\/span><span class=\"s14\">&gt;<\/span>Title<span class=\"s4\">\u00a0<\/span>In<span class=\"s4\">\u00a0<\/span>Lowercase<span class=\"s4\">\u00a0<\/span>using<span class=\"s4\">\u00a0<\/span>lowercase<span class=\"s4\">\u00a0<\/span>pipe<span class=\"s14\">&lt;\/<\/span><span class=\"s3\">h4<\/span><span class=\"s14\">&gt;<\/span><\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><span class=\"s14\">&lt;<\/span><span class=\"s3\">p<\/span><span class=\"s14\">&gt;<\/span>{{title<span class=\"s4\">\u00a0<\/span>|<span class=\"s4\">\u00a0<\/span>lowercase}}<span class=\"s14\">&lt;\/<\/span><span class=\"s3\">p<\/span><span class=\"s14\">&gt;<\/span><\/p>\n<p class=\"p15\" style=\"text-align: justify;\"><i>&lt;!&#8211;<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>This<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>Pipe<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>will<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>convert<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>the<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>data<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>in<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>title<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>Case<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>&#8211;&gt;<\/i><\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><span class=\"s14\">&lt;<\/span><span class=\"s3\">h4<\/span><span class=\"s14\">&gt;<\/span>Title<span class=\"s4\">\u00a0<\/span>In<span class=\"s4\">\u00a0<\/span>Title<span class=\"s4\">\u00a0<\/span>Case<span class=\"s4\">\u00a0<\/span>using<span class=\"s4\">\u00a0<\/span>titlecase<span class=\"s4\">\u00a0<\/span>pipe<span class=\"s14\">&lt;\/<\/span><span class=\"s3\">h4<\/span><span class=\"s14\">&gt;<\/span><\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><span class=\"s14\">&lt;<\/span><span class=\"s3\">p<\/span><span class=\"s14\">&gt;<\/span>{{title<span class=\"s4\">\u00a0<\/span>|<span class=\"s4\">\u00a0<\/span>titlecase}}<span class=\"s14\">&lt;\/<\/span><span class=\"s3\">p<\/span><span class=\"s14\">&gt;<\/span><\/p>\n<p class=\"p15\" style=\"text-align: justify;\"><i>&lt;!&#8211;<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>This<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>Pipe<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>will<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>convert<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>the<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>data<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>in<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>the<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>required<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>currency<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>&#8211;&gt;<\/i><\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><span class=\"s14\">&lt;<\/span><span class=\"s3\">h4<\/span><span class=\"s14\">&gt;<\/span>Currency<span class=\"s4\">\u00a0<\/span>Pipe<span class=\"s4\">\u00a0<\/span>using<span class=\"s4\">\u00a0<\/span>Currency<span class=\"s4\">\u00a0<\/span>Pipe<span class=\"s14\">&lt;\/<\/span><span class=\"s3\">h4<\/span><span class=\"s14\">&gt;<\/span><\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><span class=\"s14\">&lt;<\/span><span class=\"s3\">p<\/span><span class=\"s14\">&gt;<\/span>{{5678.90<span class=\"s4\">\u00a0<\/span>|<span class=\"s4\">\u00a0<\/span>currency:&#8221;INR&#8221;}}<span class=\"s14\">&lt;\/<\/span><span class=\"s3\">p<\/span><span class=\"s14\">&gt;<\/span><\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><span class=\"s14\">&lt;<\/span><span class=\"s3\">p<\/span><span class=\"s14\">&gt;<\/span>{{5678.90<span class=\"s4\">\u00a0<\/span>|<span class=\"s4\">\u00a0<\/span>currency:&#8221;USD&#8221;}}<span class=\"s14\">&lt;\/<\/span><span class=\"s3\">p<\/span><span class=\"s14\">&gt;<\/span><\/p>\n<p class=\"p15\" style=\"text-align: justify;\"><i>&lt;!&#8211;<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>This<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>Pipe<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>will<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>transform<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>the<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>data<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>in<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>to<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>required<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>dat<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>format<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>&#8211;&gt;<\/i><\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><span class=\"s14\">&lt;<\/span><span class=\"s3\">h4<\/span><span class=\"s14\">&gt;<\/span>Date<span class=\"s4\">\u00a0<\/span>of<span class=\"s4\">\u00a0<\/span>Today<span class=\"s4\">\u00a0<\/span>using<span class=\"s4\">\u00a0<\/span>Date<span class=\"s4\">\u00a0<\/span>pipe<span class=\"s14\">&lt;\/<\/span><span class=\"s3\">h4<\/span><span class=\"s14\">&gt;<\/span><\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><span class=\"s14\">&lt;<\/span><span class=\"s3\">p<\/span><span class=\"s14\">&gt;<\/span>{{dateOfToday<span class=\"s4\">\u00a0<\/span>|<span class=\"s4\">\u00a0<\/span>date:&#8217;d\/M\/y&#8217;}}<span class=\"s14\">&lt;\/<\/span><span class=\"s3\">p<\/span><span class=\"s14\">&gt;<\/span><\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><span class=\"s14\">&lt;<\/span><span class=\"s3\">p<\/span><span class=\"s14\">&gt;<\/span>{{dateOfToday<span class=\"s4\">\u00a0<\/span>|<span class=\"s4\">\u00a0<\/span>date:&#8217;shortTime&#8217;}}<span class=\"s14\">&lt;\/<\/span><span class=\"s3\">p<\/span><span class=\"s14\">&gt;<\/span><\/p>\n<p class=\"p15\" style=\"text-align: justify;\"><i>&lt;!&#8211;<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>This<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>Pipe<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>will<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>transform<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>the<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>data<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>to<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>the<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>decinal<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>format&#8211;&gt;<\/i><\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><span class=\"s14\">&lt;<\/span><span class=\"s3\">h4<\/span><span class=\"s14\">&gt;<\/span>User<span class=\"s4\">\u00a0<\/span>Salary<span class=\"s4\">\u00a0<\/span>in<span class=\"s4\">\u00a0<\/span>decimal<span class=\"s4\">\u00a0<\/span>using<span class=\"s4\">\u00a0<\/span>Decimal<span class=\"s4\">\u00a0<\/span>Pipe<span class=\"s14\">&lt;\/<\/span><span class=\"s3\">h4<\/span><span class=\"s14\">&gt;<\/span><\/p>\n<p class=\"p15\" style=\"text-align: justify;\"><i>&lt;!&#8211;4<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>is<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>for<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>main<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>integer,<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>3<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>-4<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>are<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>for<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>integers<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>to<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>be<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>displayed.&#8211;&gt;<\/i><\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><span class=\"s14\">&lt;<\/span><span class=\"s3\">p<\/span><span class=\"s14\">&gt;<\/span>{{<span class=\"s4\">\u00a0<\/span>565.8787876<span class=\"s4\">\u00a0<\/span>|<span class=\"s4\">\u00a0<\/span>number:<span class=\"s4\">\u00a0<\/span>&#8216;4.3-4&#8217;<span class=\"s4\">\u00a0<\/span>}}<span class=\"s14\">&lt;\/<\/span><span class=\"s3\">p<\/span><span class=\"s14\">&gt;<\/span><\/p>\n<p class=\"p15\" style=\"text-align: justify;\"><i>&lt;!&#8211;This<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>Pipe<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>will<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>transform<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>the<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>data<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>to<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>JSON<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>format<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>&#8211;&gt;<\/i><\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><span class=\"s14\">&lt;<\/span><span class=\"s3\">h4<\/span><span class=\"s14\">&gt;<\/span>User<span class=\"s4\">\u00a0<\/span>Data<span class=\"s4\">\u00a0<\/span>in<span class=\"s4\">\u00a0<\/span>Json<span class=\"s4\">\u00a0<\/span>format<span class=\"s4\">\u00a0<\/span>using<span class=\"s4\">\u00a0<\/span>Json<span class=\"s4\">\u00a0<\/span>Pipe<span class=\"s14\">&lt;\/<\/span><span class=\"s3\">h4<\/span><span class=\"s14\">&gt;<\/span><\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><span class=\"s14\">&lt;<\/span><span class=\"s3\">p<\/span><span class=\"s14\">&gt;<\/span>{{<span class=\"s4\">\u00a0<\/span>userData<span class=\"s4\">\u00a0<\/span>|<span class=\"s4\">\u00a0<\/span>json<span class=\"s4\">\u00a0<\/span>}}<span class=\"s14\">&lt;\/<\/span><span class=\"s3\">p<\/span><span class=\"s14\">&gt;<\/span><\/p>\n<p class=\"p15\" style=\"text-align: justify;\"><i>&lt;!&#8211;<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>This<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>Pipe<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>will<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>convert<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>to<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>the<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>percentage<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>&#8211;&gt;<\/i><\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><span class=\"s14\">&lt;<\/span><span class=\"s3\">h4<\/span><span class=\"s14\">&gt;<\/span>User<span class=\"s4\">\u00a0<\/span>attendence<span class=\"s4\">\u00a0<\/span>in<span class=\"s4\">\u00a0<\/span>Percent<span class=\"s4\">\u00a0<\/span>using<span class=\"s4\">\u00a0<\/span>Percent<span class=\"s4\">\u00a0<\/span>Pipe<span class=\"s14\">&lt;\/<\/span><span class=\"s3\">h4<\/span><span class=\"s14\">&gt;<\/span><\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><span class=\"s14\">&lt;<\/span><span class=\"s3\">p<\/span><span class=\"s14\">&gt;<\/span>{{00.78789<span class=\"s4\">\u00a0<\/span>|<span class=\"s4\">\u00a0<\/span>percent}}<span class=\"s14\">&lt;\/<\/span><span class=\"s3\">p<\/span><span class=\"s14\">&gt;<\/span><\/p>\n<p class=\"p15\" style=\"text-align: justify;\"><i>&lt;!&#8211;<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>This<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>Pipe<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>will<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>slice<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>the<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>array<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>Data<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>&#8211;&gt;<\/i><\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><span class=\"s14\">&lt;<\/span><span class=\"s3\">h4<\/span><span class=\"s14\">&gt;<\/span>Slice<span class=\"s4\">\u00a0<\/span>the<span class=\"s4\">\u00a0<\/span>Array<span class=\"s4\">\u00a0<\/span>data<span class=\"s4\">\u00a0<\/span>using<span class=\"s4\">\u00a0<\/span>Slice<span class=\"s4\">\u00a0<\/span>Pipe<span class=\"s14\">&lt;\/<\/span><span class=\"s3\">h4<\/span><span class=\"s14\">&gt;<\/span><\/p>\n<p class=\"p15\" style=\"text-align: justify;\"><i>&lt;!&#8211;<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>0<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>&amp;<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>11<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>refers<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>here<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>to<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>the<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>start<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>and<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>end<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>index<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>&#8211;&gt;<\/i><\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><span class=\"s14\">&lt;<\/span><span class=\"s3\">p<\/span><span class=\"s14\">&gt;<\/span>{{monthName<span class=\"s4\">\u00a0<\/span>|<span class=\"s4\">\u00a0<\/span>slice:0:9}}<span class=\"s14\">&lt;\/<\/span><span class=\"s3\">p<\/span><span class=\"s14\">&gt;<\/span><\/p>\n<p class=\"p15\" style=\"text-align: justify;\"><i>&lt;!&#8211;<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>This<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>async<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>pipe<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>will<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>call<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>the<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>then<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>method<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>of<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>the<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>promise<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>and it<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>will<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>subscribe<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>and<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>unsubscribe<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>from<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>the<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>observable<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>routinely.<\/i><span class=\"s4\"><i>\u00a0<\/i><\/span><i>&#8211;&gt;<\/i><\/p>\n<p class=\"p18\" style=\"text-align: justify;\">&lt;<span class=\"s3\">p<\/span>&gt;<\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><span class=\"s4\">\u00a0\u00a0\u00a0\u00a0<\/span>{{asyncPromise<span class=\"s4\">\u00a0<\/span>|<span class=\"s4\">\u00a0<\/span>async}}<\/p>\n<p class=\"p18\" style=\"text-align: justify;\">&lt;\/<span class=\"s3\">p<\/span>&gt;<\/p>\n<p class=\"p18\" style=\"text-align: justify;\">&lt;<span class=\"s3\">p<\/span>&gt;<\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><span class=\"s4\">\u00a0\u00a0\u00a0\u00a0<\/span>{{asyncObservable<span class=\"s4\">\u00a0<\/span>|<span class=\"s4\">\u00a0<\/span>async}}<\/p>\n<p class=\"p18\" style=\"text-align: justify;\">&lt;\/<span class=\"s3\">p<\/span>&gt;<\/p>\n<p class=\"p1\" style=\"text-align: justify;\">Below mentioned output is the output of the above code after running the AngularPipeDemo app.<\/p>\n<p class=\"p14\" style=\"text-align: justify;\"><span class=\"Apple-converted-space\">\u00a0<\/span><\/p>\n<p class=\"p1\" style=\"text-align: justify;\">Following Async Pipe Output will generate after 3 seconds :<\/p>\n<h3 class=\"p14\" style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"How_to_create_Custom_Pipe_in_Angular\"><\/span><strong>How to create Custom Pipe in Angular?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p class=\"p1\" style=\"text-align: justify;\">We can create a custom pipe in angular using the following code:<\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><b>ng<\/b><span class=\"s4\"><b>\u00a0<\/b><\/span><b>generate<\/b><span class=\"s4\"><b>\u00a0<\/b><\/span><b>pipe &lt;nameOfPipe&gt;<\/b><\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><b>or<\/b><\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><b>ng<\/b><span class=\"s4\"><b>\u00a0<\/b><\/span><b>g<\/b><span class=\"s4\"><b>\u00a0<\/b><\/span><b>p<\/b><span class=\"s4\"><b>\u00a0<\/b><\/span><b>&lt;nameOfPipe&gt;<\/b><\/p>\n<p class=\"p1\" style=\"text-align: justify;\">If you want to create the pipe named with SquareRootPipe then run the following command:<\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><b>ng<\/b><span class=\"s4\"><b>\u00a0<\/b><\/span><b>generate<\/b><span class=\"s4\"><b>\u00a0<\/b><\/span><b>pipe<\/b><span class=\"s4\"><b>\u00a0<\/b><\/span><b>squareRoot<\/b><\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><b>Or<\/b><\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><b>ng<\/b><span class=\"s4\"><b>\u00a0<\/b><\/span><b>g<\/b><span class=\"s4\"><b>\u00a0<\/b><\/span><b>p<\/b><span class=\"s4\"><b>\u00a0<\/b><\/span><b>squareRoot<\/b><\/p>\n<p class=\"p1\" style=\"text-align: justify;\">After executing the following command the files will generate<\/p>\n<ul class=\"ul1\" style=\"text-align: justify;\">\n<li class=\"li1\">square-root.pipe.ts:- This file is used for custom logic for pipe\/filter the data<\/li>\n<li class=\"li1\">square-root.pipe.spec.ts:- This file used for testing purpose<\/li>\n<\/ul>\n<p class=\"p1\" style=\"text-align: justify;\">In addition to this app.module.ts also get updated. The following code snippet file is the app.module.ts file<\/p>\n<p class=\"p6\" style=\"text-align: justify;\"><span class=\"s3\">import<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">{<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s7\">BrowserModule<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">}<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s3\">from<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">&#8216;<\/span>@angular\/platform-browser<span class=\"s5\">&#8216;;<\/span><\/p>\n<p class=\"p6\" style=\"text-align: justify;\"><span class=\"s3\">import<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">{<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s7\">NgModule<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">}<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s3\">from<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">&#8216;<\/span>@angular\/core<span class=\"s5\">&#8216;;<\/span><\/p>\n<p class=\"p6\" style=\"text-align: justify;\"><span class=\"s3\">import<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">{<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s7\">AppRoutingModule<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">}<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s3\">from<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">&#8216;<\/span>.\/app-routing.module<span class=\"s5\">&#8216;;<\/span><\/p>\n<p class=\"p6\" style=\"text-align: justify;\"><span class=\"s3\">import<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">{<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s7\">AppComponent<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">}<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s3\">from<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">&#8216;<\/span>.\/app.component<span class=\"s5\">&#8216;;<\/span><\/p>\n<p class=\"p6\" style=\"text-align: justify;\"><span class=\"s3\">import<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">{<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s7\">SquareRootPipe<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">}<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s3\">from<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">&#8216;<\/span>.\/square-root.pipe<span class=\"s5\">&#8216;;<\/span><\/p>\n<p class=\"p8\" style=\"text-align: justify;\"><span class=\"s5\">@<\/span><b>NgModule<\/b><span class=\"s9\">(<\/span><span class=\"s5\">{<\/span><\/p>\n<p class=\"p8\" style=\"text-align: justify;\"><span class=\"s8\">\u00a0\u00a0<\/span>declarations<span class=\"s5\">:<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s9\">[<\/span><\/p>\n<p class=\"p8\" style=\"text-align: justify;\"><span class=\"s8\">\u00a0\u00a0\u00a0\u00a0<\/span><b>AppComponent<\/b><span class=\"s5\">,<\/span><\/p>\n<p class=\"p8\" style=\"text-align: justify;\"><span class=\"s8\">\u00a0\u00a0\u00a0\u00a0<\/span><b>SquareRootPipe<\/b><\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><span class=\"s4\">\u00a0\u00a0<\/span>]<span class=\"s5\">,<\/span><\/p>\n<p class=\"p8\" style=\"text-align: justify;\"><span class=\"s8\">\u00a0\u00a0<\/span>imports<span class=\"s5\">:<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s9\">[<\/span><\/p>\n<p class=\"p8\" style=\"text-align: justify;\"><span class=\"s8\">\u00a0\u00a0\u00a0\u00a0<\/span><b>BrowserModule<\/b><span class=\"s5\">,<\/span><\/p>\n<p class=\"p8\" style=\"text-align: justify;\"><span class=\"s8\">\u00a0\u00a0\u00a0\u00a0<\/span><b>AppRoutingModule<\/b><\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><span class=\"s4\">\u00a0\u00a0<\/span>]<span class=\"s5\">,<\/span><\/p>\n<p class=\"p8\" style=\"text-align: justify;\"><span class=\"s8\">\u00a0\u00a0<\/span>providers<span class=\"s5\">:<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s9\">[]<\/span><span class=\"s5\">,<\/span><\/p>\n<p class=\"p8\" style=\"text-align: justify;\"><span class=\"s8\">\u00a0\u00a0<\/span>bootstrap<span class=\"s5\">:<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s9\">[<\/span><b>AppComponent<\/b><span class=\"s9\">]<\/span><\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><span class=\"s5\">}<\/span>)<\/p>\n<p class=\"p8\" style=\"text-align: justify;\"><span class=\"s3\">export<\/span><span class=\"s8\">\u00a0<\/span>class<span class=\"s8\">\u00a0<\/span><b>AppModule<\/b><span class=\"s8\">\u00a0<\/span><span class=\"s5\">{<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">}<\/span><\/p>\n<p class=\"p1\" style=\"text-align: justify;\">Go to square-root.ts file:<\/p>\n<p class=\"p1\" style=\"text-align: justify;\">You can see the SquareRootPipe is implemented from PipeTransform<\/p>\n<h3 class=\"p20\" style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"What_is_Pipe_Transform\"><\/span><strong>What is Pipe Transform?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p class=\"p1\" style=\"text-align: justify;\">An interface that is implemented by pipes for the person of performing a transformation. Angular invokes the transform method with the data value of a binding as the initial argument and any parameters as the second argument in the form of list.<\/p>\n<p class=\"p1\" style=\"text-align: justify;\">Call transform using the value of type number and using this value perform the sqrt Math function.<\/p>\n<p class=\"p1\" style=\"text-align: justify;\">The following code is a code snippet of square-root.pipe.ts file<\/p>\n<p class=\"p8\" style=\"text-align: justify;\"><span class=\"s3\">import<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">{<\/span><span class=\"s8\">\u00a0<\/span>Pipe<span class=\"s5\">,<\/span><span class=\"s8\">\u00a0<\/span>PipeTransform<span class=\"s8\">\u00a0<\/span><span class=\"s5\">}<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s3\">from<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">&#8216;<\/span><span class=\"s6\">@angular\/core<\/span><span class=\"s5\">&#8216;;<\/span><\/p>\n<p class=\"p8\" style=\"text-align: justify;\"><span class=\"s5\">@<\/span><b>Pipe<\/b><span class=\"s9\">(<\/span><span class=\"s5\">{<\/span><\/p>\n<p class=\"p6\" style=\"text-align: justify;\"><span class=\"s8\">\u00a0\u00a0<\/span><span class=\"s7\">name<\/span><span class=\"s5\">:<\/span><span class=\"s8\">\u00a0<\/span><span class=\"s5\">&#8216;<\/span>squareRoot<span class=\"s5\">&#8216;<\/span><\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><span class=\"s5\">}<\/span>)<\/p>\n<p class=\"p8\" style=\"text-align: justify;\"><span class=\"s3\">export<\/span><span class=\"s8\">\u00a0<\/span>class<span class=\"s8\">\u00a0<\/span><b>SquareRootPipe<\/b><span class=\"s8\">\u00a0<\/span><span class=\"s3\">implements<\/span><span class=\"s8\">\u00a0<\/span><b>PipeTransform<\/b><span class=\"s8\">\u00a0<\/span><span class=\"s5\">{<\/span><\/p>\n<p class=\"p8\" style=\"text-align: justify;\"><span class=\"s8\">\u00a0\u00a0<\/span><span class=\"s11\"><b>transform<\/b><\/span><span class=\"s5\">(<\/span>value<span class=\"s5\">:<\/span><span class=\"s8\">\u00a0<\/span>number<span class=\"s5\">):<\/span><span class=\"s8\">\u00a0<\/span>number<span class=\"s8\">\u00a0<\/span><span class=\"s5\">{<\/span><\/p>\n<p class=\"p8\" style=\"text-align: justify;\"><span class=\"s8\">\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"s3\">return<\/span><span class=\"s8\">\u00a0<\/span>Math<span class=\"s5\">.<\/span><span class=\"s11\"><b>sqrt<\/b><\/span><span class=\"s9\">(<\/span>value<span class=\"s9\">)<\/span><span class=\"s5\">;<\/span><\/p>\n<p class=\"p11\" style=\"text-align: justify;\">\u00a0\u00a0<span class=\"s12\">}<\/span><\/p>\n<p class=\"p13\" style=\"text-align: justify;\">}<\/p>\n<p class=\"p1\" style=\"text-align: justify;\">Now use this pipe to the component, following is the code snippet of app.component.html file<\/p>\n<p class=\"p23\" style=\"text-align: justify;\"><span class=\"s14\">&lt;<\/span>div<span class=\"s14\">&gt;<\/span><\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><span class=\"s4\">\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"s14\">&lt;<\/span><span class=\"s3\">h2<\/span><span class=\"s14\">&gt;<\/span><span class=\"s4\">\u00a0<\/span>Demo<span class=\"s4\">\u00a0<\/span>Of<span class=\"s4\">\u00a0<\/span>Custom<span class=\"s4\">\u00a0<\/span>Pipes<span class=\"s4\">\u00a0<\/span><span class=\"s14\">&lt;\/<\/span><span class=\"s3\">h2<\/span><span class=\"s14\">&gt;<\/span><\/p>\n<p class=\"p23\" style=\"text-align: justify;\"><span class=\"s14\">&lt;\/<\/span>div<span class=\"s14\">&gt;<\/span><\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><span class=\"s14\">&lt;<\/span><span class=\"s3\">h3<\/span><span class=\"s14\">&gt;<\/span><span class=\"s4\">\u00a0<\/span>Squre<span class=\"s4\">\u00a0<\/span>root<span class=\"s4\">\u00a0<\/span>of<span class=\"s4\">\u00a0<\/span>36<span class=\"s4\">\u00a0<\/span>is<span class=\"s4\">\u00a0<\/span>:<span class=\"s4\">\u00a0<\/span>{{<span class=\"s4\">\u00a0<\/span>36<span class=\"s4\">\u00a0<\/span>|<span class=\"s4\">\u00a0<\/span>squareRoot<span class=\"s4\">\u00a0<\/span>}}<span class=\"s4\">\u00a0<\/span><span class=\"s14\">&lt;\/<\/span><span class=\"s3\">h3<\/span><span class=\"s14\">&gt;<\/span><\/p>\n<p class=\"p5\" style=\"text-align: justify;\"><span class=\"s14\">&lt;<\/span><span class=\"s3\">h3<\/span><span class=\"s14\">&gt;<\/span><span class=\"s4\">\u00a0<\/span>Squre<span class=\"s4\">\u00a0<\/span>root<span class=\"s4\">\u00a0<\/span>of<span class=\"s4\">\u00a0<\/span>50 is<span class=\"s4\">\u00a0<\/span>:<span class=\"s4\">\u00a0<\/span>{{<span class=\"s4\">\u00a0<\/span>50 |<span class=\"s4\">\u00a0<\/span>squareRoot<span class=\"s4\">\u00a0<\/span>}}<span class=\"s4\">\u00a0<\/span><span class=\"s14\">&lt;\/<\/span><span class=\"s3\">h3<\/span><span class=\"s14\">&gt;<\/span><\/p>\n<p class=\"p1\" style=\"text-align: justify;\">Here is the output of the beyond code snippet:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"_Conclusion\"><\/span><strong><span class=\"Apple-converted-space\">\u00a0<\/span>Conclusion<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p class=\"p1\" style=\"text-align: justify;\">In this blog, we have seen <a href=\"https:\/\/www.digital-web-services.com\/an-introduction-to-angular-pipes.html\"><strong>Angular pipes which are Angular built-in Pipes and Angular custom Pipes<\/strong><\/a>. In built-in pipes, we have seen the types of different built-in pipes with syntax and example of it. Then in custom pipes, we have seen the step to generate custom pipe required files by writing the commands and by modifying the changes for custom pipe logic and used in component Html file.<\/p>\n<p style=\"text-align: justify;\"><div class=\"wpsm-testimonial\"><div class=\"wpsm-testimonial-content\"><strong>Author Bio:<\/strong> Vinod Satapara \u2013 Technical Director, iFour Technolab Pvt. Ltd. Technocrat and entrepreneur with years of experience building large scale enterprise web, cloud and mobile applications using latest technologies like ASP.NET, CORE, .NET MVC, Angular and Blockchain. Keen interest in addressing business problems using latest technologies and have been associated with <a href=\"https:\/\/www.ifourtechnolab.com\/angular-js-development-company\" target=\"_blank\" rel=\"noopener noreferrer\">AngularJS Frontend development companies<\/a>.<br \/>\n<\/div><div class=\"wpsm-testimonial-author\"><img decoding=\"async\" src=\"https:\/\/www.digital-web-services.com\/wp-content\/uploads\/Digital-Web-Services-Technical-Author-.jpg\" alt=\"Vinod Satapara\" class=\"author_image\">Vinod Satapara<\/div><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular is recognized among the dominating frontend frameworks used for UI development especially because of its features and great performance delivery. In this article, we will shed light on one of the essential topics of Angular i.e., Angular pipe. What is Angular Pipe? Angular pipes are used to filter the data and it is denoted [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5404,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_gspb_post_css":"","footnotes":""},"categories":[7],"tags":[],"offerexpiration":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Get An Introduction About Angular Pipes in 2023 - Digital Web Services<\/title>\n<meta name=\"description\" content=\"Here the full and useful information about Angular Pipes, Kindly learn it and implement it on functional capability of these built-in pipes.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.digital-web-services.com\/an-introduction-to-angular-pipes.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Get An Introduction About Angular Pipes in 2023 - Digital Web Services\" \/>\n<meta property=\"og:description\" content=\"Here the full and useful information about Angular Pipes, Kindly learn it and implement it on functional capability of these built-in pipes.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.digital-web-services.com\/an-introduction-to-angular-pipes.html\" \/>\n<meta property=\"og:site_name\" content=\"Digital Web Services\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/digitalwbservices\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/digitalwbservices\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-25T03:02:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-25T03:03:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.digital-web-services.com\/wp-content\/uploads\/An-Introduction-to-Angular-Pipes.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"900\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Digital Web Services\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@digitalwebservs\" \/>\n<meta name=\"twitter:site\" content=\"@digitalwebservs\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Digital Web Services\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.digital-web-services.com\/an-introduction-to-angular-pipes.html#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.digital-web-services.com\/an-introduction-to-angular-pipes.html\"},\"author\":{\"name\":\"Digital Web Services\",\"@id\":\"https:\/\/www.digital-web-services.com\/#\/schema\/person\/c0e9c781fa72cdd7c935d65b1d97291b\"},\"headline\":\"An Introduction to Angular Pipes\",\"datePublished\":\"2020-11-25T03:02:29+00:00\",\"dateModified\":\"2020-11-25T03:03:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.digital-web-services.com\/an-introduction-to-angular-pipes.html\"},\"wordCount\":1333,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.digital-web-services.com\/#organization\"},\"articleSection\":[\"Programming\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.digital-web-services.com\/an-introduction-to-angular-pipes.html#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.digital-web-services.com\/an-introduction-to-angular-pipes.html\",\"url\":\"https:\/\/www.digital-web-services.com\/an-introduction-to-angular-pipes.html\",\"name\":\"Get An Introduction About Angular Pipes in 2023 - Digital Web Services\",\"isPartOf\":{\"@id\":\"https:\/\/www.digital-web-services.com\/#website\"},\"datePublished\":\"2020-11-25T03:02:29+00:00\",\"dateModified\":\"2020-11-25T03:03:42+00:00\",\"description\":\"Here the full and useful information about Angular Pipes, Kindly learn it and implement it on functional capability of these built-in pipes.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.digital-web-services.com\/an-introduction-to-angular-pipes.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.digital-web-services.com\/an-introduction-to-angular-pipes.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.digital-web-services.com\/an-introduction-to-angular-pipes.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.digital-web-services.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"An Introduction to Angular Pipes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.digital-web-services.com\/#website\",\"url\":\"https:\/\/www.digital-web-services.com\/\",\"name\":\"Digital Web Services\",\"description\":\"Software &amp; Web IT Solutions\",\"publisher\":{\"@id\":\"https:\/\/www.digital-web-services.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.digital-web-services.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.digital-web-services.com\/#organization\",\"name\":\"Digital Web Services\",\"alternateName\":\"DWS\",\"url\":\"https:\/\/www.digital-web-services.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.digital-web-services.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.digital-web-services.com\/wp-content\/uploads\/DWS-Brand-Logo.jpg\",\"contentUrl\":\"https:\/\/www.digital-web-services.com\/wp-content\/uploads\/DWS-Brand-Logo.jpg\",\"width\":500,\"height\":500,\"caption\":\"Digital Web Services\"},\"image\":{\"@id\":\"https:\/\/www.digital-web-services.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/digitalwbservices\/\",\"https:\/\/twitter.com\/digitalwebservs\",\"https:\/\/www.instagram.com\/digitalwebservices\/\",\"https:\/\/www.linkedin.com\/in\/digitalwebservices\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.digital-web-services.com\/#\/schema\/person\/c0e9c781fa72cdd7c935d65b1d97291b\",\"name\":\"Digital Web Services\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.digital-web-services.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5ebf80e59bcd3de8f883ad135bd039c9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5ebf80e59bcd3de8f883ad135bd039c9?s=96&d=mm&r=g\",\"caption\":\"Digital Web Services\"},\"description\":\"Digital Web Services (DWS) is a leading IT company specializing in Software Development, Web Application Development, Website Designing, and Digital Marketing. Here are providing all kinds of services and solutions for the digital transformation of any business and website.\",\"sameAs\":[\"https:\/\/www.facebook.com\/digitalwbservices\/\",\"https:\/\/www.instagram.com\/digitalwebservices\/\",\"https:\/\/www.linkedin.com\/in\/digitalwebservices\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Get An Introduction About Angular Pipes in 2023 - Digital Web Services","description":"Here the full and useful information about Angular Pipes, Kindly learn it and implement it on functional capability of these built-in pipes.","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:\/\/www.digital-web-services.com\/an-introduction-to-angular-pipes.html","og_locale":"en_US","og_type":"article","og_title":"Get An Introduction About Angular Pipes in 2023 - Digital Web Services","og_description":"Here the full and useful information about Angular Pipes, Kindly learn it and implement it on functional capability of these built-in pipes.","og_url":"https:\/\/www.digital-web-services.com\/an-introduction-to-angular-pipes.html","og_site_name":"Digital Web Services","article_publisher":"https:\/\/www.facebook.com\/digitalwbservices\/","article_author":"https:\/\/www.facebook.com\/digitalwbservices\/","article_published_time":"2020-11-25T03:02:29+00:00","article_modified_time":"2020-11-25T03:03:42+00:00","og_image":[{"width":1600,"height":900,"url":"https:\/\/www.digital-web-services.com\/wp-content\/uploads\/An-Introduction-to-Angular-Pipes.jpg","type":"image\/jpeg"}],"author":"Digital Web Services","twitter_card":"summary_large_image","twitter_creator":"@digitalwebservs","twitter_site":"@digitalwebservs","twitter_misc":{"Written by":"Digital Web Services","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.digital-web-services.com\/an-introduction-to-angular-pipes.html#article","isPartOf":{"@id":"https:\/\/www.digital-web-services.com\/an-introduction-to-angular-pipes.html"},"author":{"name":"Digital Web Services","@id":"https:\/\/www.digital-web-services.com\/#\/schema\/person\/c0e9c781fa72cdd7c935d65b1d97291b"},"headline":"An Introduction to Angular Pipes","datePublished":"2020-11-25T03:02:29+00:00","dateModified":"2020-11-25T03:03:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.digital-web-services.com\/an-introduction-to-angular-pipes.html"},"wordCount":1333,"commentCount":0,"publisher":{"@id":"https:\/\/www.digital-web-services.com\/#organization"},"articleSection":["Programming"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.digital-web-services.com\/an-introduction-to-angular-pipes.html#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.digital-web-services.com\/an-introduction-to-angular-pipes.html","url":"https:\/\/www.digital-web-services.com\/an-introduction-to-angular-pipes.html","name":"Get An Introduction About Angular Pipes in 2023 - Digital Web Services","isPartOf":{"@id":"https:\/\/www.digital-web-services.com\/#website"},"datePublished":"2020-11-25T03:02:29+00:00","dateModified":"2020-11-25T03:03:42+00:00","description":"Here the full and useful information about Angular Pipes, Kindly learn it and implement it on functional capability of these built-in pipes.","breadcrumb":{"@id":"https:\/\/www.digital-web-services.com\/an-introduction-to-angular-pipes.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.digital-web-services.com\/an-introduction-to-angular-pipes.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.digital-web-services.com\/an-introduction-to-angular-pipes.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.digital-web-services.com\/"},{"@type":"ListItem","position":2,"name":"An Introduction to Angular Pipes"}]},{"@type":"WebSite","@id":"https:\/\/www.digital-web-services.com\/#website","url":"https:\/\/www.digital-web-services.com\/","name":"Digital Web Services","description":"Software &amp; Web IT Solutions","publisher":{"@id":"https:\/\/www.digital-web-services.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.digital-web-services.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.digital-web-services.com\/#organization","name":"Digital Web Services","alternateName":"DWS","url":"https:\/\/www.digital-web-services.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.digital-web-services.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.digital-web-services.com\/wp-content\/uploads\/DWS-Brand-Logo.jpg","contentUrl":"https:\/\/www.digital-web-services.com\/wp-content\/uploads\/DWS-Brand-Logo.jpg","width":500,"height":500,"caption":"Digital Web Services"},"image":{"@id":"https:\/\/www.digital-web-services.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/digitalwbservices\/","https:\/\/twitter.com\/digitalwebservs","https:\/\/www.instagram.com\/digitalwebservices\/","https:\/\/www.linkedin.com\/in\/digitalwebservices\/"]},{"@type":"Person","@id":"https:\/\/www.digital-web-services.com\/#\/schema\/person\/c0e9c781fa72cdd7c935d65b1d97291b","name":"Digital Web Services","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.digital-web-services.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5ebf80e59bcd3de8f883ad135bd039c9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5ebf80e59bcd3de8f883ad135bd039c9?s=96&d=mm&r=g","caption":"Digital Web Services"},"description":"Digital Web Services (DWS) is a leading IT company specializing in Software Development, Web Application Development, Website Designing, and Digital Marketing. Here are providing all kinds of services and solutions for the digital transformation of any business and website.","sameAs":["https:\/\/www.facebook.com\/digitalwbservices\/","https:\/\/www.instagram.com\/digitalwebservices\/","https:\/\/www.linkedin.com\/in\/digitalwebservices\/"]}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/www.digital-web-services.com\/wp-content\/uploads\/An-Introduction-to-Angular-Pipes.jpg","_links":{"self":[{"href":"https:\/\/www.digital-web-services.com\/wp-json\/wp\/v2\/posts\/5395"}],"collection":[{"href":"https:\/\/www.digital-web-services.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.digital-web-services.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.digital-web-services.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.digital-web-services.com\/wp-json\/wp\/v2\/comments?post=5395"}],"version-history":[{"count":5,"href":"https:\/\/www.digital-web-services.com\/wp-json\/wp\/v2\/posts\/5395\/revisions"}],"predecessor-version":[{"id":5406,"href":"https:\/\/www.digital-web-services.com\/wp-json\/wp\/v2\/posts\/5395\/revisions\/5406"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.digital-web-services.com\/wp-json\/wp\/v2\/media\/5404"}],"wp:attachment":[{"href":"https:\/\/www.digital-web-services.com\/wp-json\/wp\/v2\/media?parent=5395"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.digital-web-services.com\/wp-json\/wp\/v2\/categories?post=5395"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.digital-web-services.com\/wp-json\/wp\/v2\/tags?post=5395"},{"taxonomy":"offerexpiration","embeddable":true,"href":"https:\/\/www.digital-web-services.com\/wp-json\/wp\/v2\/offerexpiration?post=5395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}