{"id":1796,"date":"2019-06-24T12:32:07","date_gmt":"2019-06-24T07:02:07","guid":{"rendered":"http:\/\/blog.openwebsolutions.in\/?p=1796"},"modified":"2019-06-25T12:44:47","modified_gmt":"2019-06-25T07:14:47","slug":"create-custom-pipes-angular-7","status":"publish","type":"post","link":"https:\/\/openwebsolutions.in\/blog\/create-custom-pipes-angular-7\/","title":{"rendered":"How we can create Custom Pipes in Angular 7?"},"content":{"rendered":"

Custom Pipes<\/h2>\n

 <\/p>\n

 <\/p>\n

\"\"
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 pipes<\/span><\/span><\/strong><\/figcaption><\/figure>\n

 <\/p>\n

Pipes are a very helpful feature in Angular.\u00a0There are some\u00a0built-in pipes, but I can also build my own pipes, that is called Custom Pipe.\u00a0In this blog, we will learn about Custom Pipe in Angular7. Pipes are one of the interesting features of angular but sometimes built-in pipes<\/em> are not sufficient for our formatting data, there we need to create custom pipes<\/strong>. To create a custom pipe, we need to create a .ts<\/strong><\/em> file and that file will be a pipe with the help of a @Pipe decorator.\u00a0Use ng generate<\/em> commands to create a Custom pipe.\u00a0We are taking the date of birth from a template and from this date we are extracting the only year to get the age of the user. Instead of the Date of Birth, I want to display the current age of Employees using a custom pipe.<\/p>\n

Let’s start…<\/strong><\/p>\n

 <\/p>\n

 <\/p>\n

\"\"
\u00a0 Before using custom pipe<\/strong><\/span><\/figcaption><\/figure>\n

 <\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0<\/span><\/p>\n

<\/h3>\n

 <\/p>\n

<\/h3>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

app.component.html<\/h3>\n
         <!-- Custom Pipe--> \r\n\r\n<h4 [ngClass]=\"'green fs-18'\">Using Custom Pipe<\/h4>\r\n<table [attr.border]=\"border\" [ngClass]=\"'collapse-none'\" width=100;cellpadding=\"5\" cellspacing=\"0\">\r\n    <thead>\r\n       <tr>\r\n         <th [attr.colspan]=\"cols\" [ngClass]=\"['blue']\">Emp List<\/th>\r\n       <\/tr>\r\n    <\/thead>\r\n    <thead>\r\n        <tr [ngClass]=\"'blue1 white'\">\r\n          <th [ngClass]=\"'center'\">Id<\/th>\r\n          <th [ngClass]=\"'center'\">Name<\/th>\r\n          <th [ngClass]=\"'center'\">City<\/th>\r\n          <th [ngClass]=\"'center'\">Salary<\/th>\r\n          <th [ngClass]=\"'center'\">DOB<\/th> \r\n          <th [ngClass]=\"'center'\">Age<\/th> \r\n        <\/tr>\r\n    <\/thead>\r\n    <tbody>\r\n       <tr *ngFor=\"let member of teams ; let i=index\">\r\n          <td [ngClass]=\"'center'\">10{{i+1}}<\/td>\r\n          <td [ngClass]=\"'center'\">{{member.name}}<\/td>\r\n          <td [ngClass]=\"'center'\">{{member.city}}<\/td>\r\n          <td [ngClass]=\"'center'\">{{member.salary|currency:\"INR\":true}}<\/td>\r\n          <td [ngClass]=\"'center'\">{{member.dob}}<\/td> \r\n          <td [ngClass]=\"'center'\">{{member.dob|mypipe}}<\/strong><\/td> \r\n       <\/tr>\r\n\r\n    <\/tbody>\r\n<\/table>\r\n<\/pre>\n
\u00a0<\/strong>In the column of Age<\/em><\/strong>, I added pipe symbol ( | ) and name of a pipe(mypipe)\u00a0<\/strong>and in the column of Salary<\/em><\/strong>, I also used another pipe called Parameterized Pipes. After currency,\u00a0<\/em>use any country code which I want to like(“USD<\/em>“).<\/p>\n
****<\/span> Here I use\u00a0 Attribute Binding (in my previous blog, I discussed Attribute Binding,\u00a0http:\/\/blog.openwebsolutions.in\/create-attribute-binding-angular-7\/<\/a>),<\/p>\n
app.component.scss<\/h3>\n
Here we modified our table using scss property.<\/p>\n
 <\/p>\n
.blue{\r\n\u00a0\u00a0\u00a0\u00a0color:#037FC2;\r\n}\r\n.blue1{\r\n\u00a0\u00a0\u00a0\u00a0background:#037FC2;\r\n\u00a0\u00a0\u00a0\u00a0color:#fff;\r\n}\r\n.green{\r\n\u00a0\u00a0\u00a0\u00a0color:#079E32;\r\n}\r\n.fs-18{\r\n\u00a0\u00a0\u00a0\u00a0font-size:18px;\r\n}\r\n.collapse-none{\r\n\u00a0\u00a0\u00a0\u00a0border-collapse: unset !important;\r\n\u00a0\u00a0\u00a0\u00a0width:100%;\r\n}<\/pre>\n
app.component.ts<\/h3>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\/\/ custom pipe \/\/\r\n\r\nteams:any=[\r\n   {\r\n   'name':'John', 'city':'Delhi', 'salary':25000, 'dob':'10\/05\/1989'\r\n   },\r\n   {\r\n   'name':'Peter', 'city':'Pune', 'salary':80000, 'dob':\"12\/05\/1985\"\r\n   },\r\n   {\r\n   'name':'Om', 'city':'Goa', 'salary':150000, 'dob':\"10\/10\/1991\"\r\n   },\r\n   {\r\n   'name':'Kunal', 'city':'Delhi', 'salary':55000, 'dob':\"12\/18\/1987\"\r\n   }\r\n];<\/pre>\n
Now we generate mypipe.ts<\/strong>. Open the terminal and type<\/p>\n
 ng g pipe mypipe –flat <\/strong><\/p>\n
*****<\/span> –flat<\/strong> puts the file in src\/app<\/strong> instead of its own folder.<\/p>\n
 <\/p>\n
mypipe.ts<\/h3>\n
@Pipe({\r\nname: 'mypipe<\/strong>'\r\n})<\/pre>\n
\n
export class MypipePipe<\/strong> implements PipeTransform {\r\n\r\n\u00a0 \u00a0 \u00a0transform(value: string): string {\r\n\u00a0 \u00a0 \u00a0 \u00a0let currentYear: any = new Date().getFullYear();\r\n\u00a0 \u00a0 \u00a0 \u00a0let teamsBirthYear: any = new Date(value).getFullYear();\r\n       let teamsAge = currentYear - teamsBirthYear;\r\n\r\n           return teamsAge;\r\n       }\r\n}<\/pre>\n<\/div>\n
 <\/p>\n
\"After
\u00a0 \u00a0After using Custom pipe<\/strong><\/span><\/figcaption><\/figure>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
This is the result…<\/p>\n
In my next blog, I’ll discuss some other topic on Angular 7.<\/p>\n","protected":false},"excerpt":{"rendered":"
Custom Pipes       Pipes are a very helpful feature in Angular.\u00a0There are some\u00a0built-in pipes, but I can also build my own pipes, that is called Custom Pipe.\u00a0In this blog, we will learn about Custom Pipe in Angular7. Pipes are one of the interesting features of angular but sometimes built-in pipes are not sufficient […]<\/p>\n","protected":false},"author":31,"featured_media":1801,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[18,5],"tags":[134],"yoast_head":"\nHow we can create Custom Pipes in Angular 7?<\/title>\n<meta name=\"robots\" content=\"index, follow\" \/>\n<meta name=\"googlebot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta name=\"bingbot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/openwebsolutions.in\/blog\/create-custom-pipes-angular-7\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How we can create Custom Pipes in Angular 7?\" \/>\n<meta property=\"og:description\" content=\"Custom Pipes       Pipes are a very helpful feature in Angular.\u00a0There are some\u00a0built-in pipes, but I can also build my own pipes, that is called Custom Pipe.\u00a0In this blog, we will learn about Custom Pipe in Angular7. Pipes are one of the interesting features of angular but sometimes built-in pipes are not sufficient […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/openwebsolutions.in\/blog\/create-custom-pipes-angular-7\/\" \/>\n<meta property=\"og:site_name\" content=\"Openweb Solutions Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-24T07:02:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-06-25T07:14:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/openwebsolutions.in\/blog\/wp-content\/uploads\/2019\/06\/angular-custom-pipe-copy.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"350\" \/>\n\t<meta property=\"og:image:height\" content=\"255\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#website\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/\",\"name\":\"Openweb Solutions Blog\",\"description\":\"Transforming ideas into reality\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/openwebsolutions.in\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/create-custom-pipes-angular-7\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/wp-content\/uploads\/2019\/06\/angular-custom-pipe-copy.jpg\",\"width\":350,\"height\":255},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/create-custom-pipes-angular-7\/#webpage\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/create-custom-pipes-angular-7\/\",\"name\":\"How we can create Custom Pipes in Angular 7?\",\"isPartOf\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/create-custom-pipes-angular-7\/#primaryimage\"},\"datePublished\":\"2019-06-24T07:02:07+00:00\",\"dateModified\":\"2019-06-25T07:14:47+00:00\",\"author\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#\/schema\/person\/78cc69c3015b9c840d74591261861e22\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/openwebsolutions.in\/blog\/create-custom-pipes-angular-7\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#\/schema\/person\/78cc69c3015b9c840d74591261861e22\",\"name\":\"Munmun Das\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/033db0a0941d27e1e3e3bdc05f2e1189?s=96&r=g\",\"caption\":\"Munmun Das\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/1796"}],"collection":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/comments?post=1796"}],"version-history":[{"count":16,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/1796\/revisions"}],"predecessor-version":[{"id":1816,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/1796\/revisions\/1816"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/media\/1801"}],"wp:attachment":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/media?parent=1796"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/categories?post=1796"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/tags?post=1796"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}