{"id":71758,"date":"2020-01-10T16:41:11","date_gmt":"2020-01-10T11:11:11","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=71758"},"modified":"2024-04-12T14:22:41","modified_gmt":"2024-04-12T08:52:41","slug":"parameterizing-a-pipe","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/parameterizing-a-pipe\/","title":{"rendered":"Parameterizing a pipe"},"content":{"rendered":"\n

Go back to Tutorial<\/a><\/p>\n\n\n

A pipe can accept any number of optional parameters to fine-tune its output. To add parameters to a pipe, follow the pipe name with a colon ( : ) and then the parameter value (such as currency:’EUR’). If the pipe accepts multiple parameters, separate the values with colons (such as slice:1:5)<\/p>\n

Modify the birthday template to give the date pipe a format parameter. After formatting the hero’s April 15th birthday, it renders as 04\/15\/88:<\/p>\n

src\/app\/app.component.html<\/u><\/p>\n

<p>The hero’s birthday is {{ birthday | date:”MM\/dd\/yy” }} <\/p><\/p>\n

The parameter value can be any valid template expression, such as a string literal or a component property. In other words, you can control the format through a binding the same way you control the birthday value through a binding.<\/p>\n

Write a second component that binds the pipe’s format parameter to the component’s format property. Here’s the template for that component:<\/p>\n

src\/app\/hero-birthday2.component.ts (template)<\/u><\/p>\n

template: `<\/p>\n

<p>The hero’s birthday is {{ birthday | date:format }}<\/p><\/p>\n

<button (click)=”toggleFormat()”>Toggle Format<\/button><\/p>\n

You also added a button to the template and bound its click event to the component’s toggleFormat() method. That method toggles the component’s format property between a short form (‘shortDate’) and a longer form (‘fullDate’).<\/p>\n

src\/app\/hero-birthday2.component.ts (class)<\/u><\/p>\n

export class HeroBirthday2Component {<\/p>\n

birthday = new Date(1988, 3, 15); \/\/ April 15, 1988<\/p>\n

toggle = true; \/\/ start with true == shortDate<\/p>\n

get format() { return this.toggle ? ‘shortDate’ : ‘fullDate’; }<\/p>\n

toggleFormat() { this.toggle = !this.toggle; }<\/p>\n

}<\/p>\n

As you click the button, the displayed date alternates between “04\/15\/1988” and “Friday, April 15, 1988”.<\/p>\n

Chaining pipes<\/span><\/strong><\/p>\n

You can chain pipes together in potentially useful combinations. In the following example, to display the birthday in uppercase, the birthday is chained to the DatePipe and on to the UpperCasePipe. The birthday displays as APR 15, 1988.<\/p>\n

src\/app\/app.component.html<\/u><\/p>\n

The chained hero’s birthday is<\/p>\n

{{ birthday | date | uppercase}}<\/p>\n

This example\u2014which displays FRIDAY, APRIL 15, 1988\u2014chains the same pipes as above, but passes in a parameter to date as well.<\/p>\n

src\/app\/app.component.html<\/u><\/p>\n

The chained hero’s birthday is<\/p>\n

{{birthday | date:’fullDate’ | uppercase}}<\/p>\n\n\n

Go back to Tutorial<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Go back to Tutorial A pipe can accept any number of optional parameters to fine-tune its output. To add parameters to a pipe, follow the pipe name with a colon ( : ) and then the parameter value (such as currency:’EUR’). If the pipe accepts multiple parameters, separate the values with colons (such as slice:1:5)…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[8294],"tags":[8347],"class_list":["post-71758","page","type-page","status-publish","hentry","category-angular-7","tag-parameterizing-a-pipe"],"acf":[],"yoast_head":"\nParameterizing a pipe - Tutorial<\/title>\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.vskills.in\/certification\/tutorial\/parameterizing-a-pipe\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Parameterizing a pipe - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Go back to Tutorial A pipe can accept any number of optional parameters to fine-tune its output. To add parameters to a pipe, follow the pipe name with a colon ( : ) and then the parameter value (such as currency:’EUR’). If the pipe accepts multiple parameters, separate the values with colons (such as slice:1:5)...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/parameterizing-a-pipe\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T08:52:41+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/parameterizing-a-pipe\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/parameterizing-a-pipe\/\",\"name\":\"Parameterizing a pipe - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"datePublished\":\"2020-01-10T11:11:11+00:00\",\"dateModified\":\"2024-04-12T08:52:41+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/parameterizing-a-pipe\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/parameterizing-a-pipe\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/parameterizing-a-pipe\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Parameterizing a pipe\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Parameterizing a pipe - Tutorial","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.vskills.in\/certification\/tutorial\/parameterizing-a-pipe\/","og_locale":"en_US","og_type":"article","og_title":"Parameterizing a pipe - Tutorial","og_description":"Go back to Tutorial A pipe can accept any number of optional parameters to fine-tune its output. To add parameters to a pipe, follow the pipe name with a colon ( : ) and then the parameter value (such as currency:’EUR’). If the pipe accepts multiple parameters, separate the values with colons (such as slice:1:5)...","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/parameterizing-a-pipe\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-04-12T08:52:41+00:00","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/parameterizing-a-pipe\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/parameterizing-a-pipe\/","name":"Parameterizing a pipe - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"datePublished":"2020-01-10T11:11:11+00:00","dateModified":"2024-04-12T08:52:41+00:00","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/parameterizing-a-pipe\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/parameterizing-a-pipe\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/parameterizing-a-pipe\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Parameterizing a pipe"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/71758","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=71758"}],"version-history":[{"count":4,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/71758\/revisions"}],"predecessor-version":[{"id":87880,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/71758\/revisions\/87880"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=71758"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=71758"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=71758"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}