{"id":1350,"date":"2023-08-22T05:00:00","date_gmt":"2023-08-22T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1350"},"modified":"2024-08-06T12:28:45","modified_gmt":"2024-08-06T19:28:45","slug":"how-to-create-custom-pipes","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/how-to-create-custom-pipes\/","title":{"rendered":"How to create custom pipes?"},"content":{"rendered":"\n

Earlier this month, we covered how to create custom directives<\/a>. Today, let’s tackle how to create custom pipes<\/a>. Pipes help format data such as strings, dates, numbers, etc. The first thing to do is to use the Angular CLI:<\/p>\n\n\n\n

ng generate pipe [name]<\/code><\/p>\n\n\n\n

or ng g p [name]<\/code><\/p>\n\n\n\n

It’s also possible to generate standalone pipes<\/a> with the --standalone<\/code> option:<\/p>\n\n\n\n

ng generate pipe [name] --standalone<\/code><\/p>\n\n\n\n

This creates a class with a single method transform<\/code> to implement: <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

By default, the types are all set to unknown<\/code>, as Angular CLI cannot guess what kind of data we want to format. As we know what we want to format and how, as well as how many arguments our pipe can accept, we can change that signature to make it more meaningful as follows:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Most pipes have optional parameters, so it’s always a good idea to have a default value for each, as I did in this example with displayPrefix = true<\/code>.<\/p>\n\n\n\n

Assuming we change the name of the pipe in the decorator to personName<\/code>, such a pipe can safely be used as follows:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Or, if we want to turn off the prefixes, we can use our optional parameter and set its value to false<\/code>:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

Earlier this month, we covered how to create custom directives. Today, let’s tackle how to create custom pipes. Pipes help format data such as strings, dates, numbers, etc. The first thing to do is to use the Angular CLI: ng generate pipe [name] or ng g p [name] It’s also possible to generate standalone pipes with the –standalone option: ng […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,14],"tags":[],"class_list":["post-1350","post","type-post","status-publish","format-standard","hentry","category-angular","category-pipes"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1350","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1350"}],"version-history":[{"count":4,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1350\/revisions"}],"predecessor-version":[{"id":2140,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1350\/revisions\/2140"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1350"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1350"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}