{"id":297,"date":"2023-01-10T05:00:00","date_gmt":"2023-01-10T13:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=297"},"modified":"2023-01-10T09:20:34","modified_gmt":"2023-01-10T17:20:34","slug":"formatting-functions-in-angular","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/formatting-functions-in-angular\/","title":{"rendered":"Formatting functions in Angular"},"content":{"rendered":"\n

We mentioned the default config options for the date<\/code> pipe<\/a> in Angular yesterday.<\/p>\n\n\n\n

Did you know we can also format dates in our Typescript code using a formatDate<\/a><\/code> function?<\/p>\n\n\n\n

This function has the same signature as the date pipe, which makes perfect sense because… That’s the function used by the pipe itself (source code here<\/a>):<\/p>\n\n\n

formatDate(value: string | number | Date<\/span>, \n           format<\/span>: string, \n           locale<\/span>: string, \n           timezone?: string): string<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
All you need to use that function is to import it from @angular\/common<\/code>:<\/p>\n\n\n
import<\/span> {formatDate} from<\/span> \"@angular\/common\"<\/span>;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
The only downside of that function is that there is no default format or locale, so we have to pass those two values as parameters, which isn’t the case for the date<\/code> pipe.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
For more information on those functions, I have this tutorial on formatting dates and numbers with Angular<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
We mentioned the default config options for the date pipe in Angular yesterday. Did you know we can also format dates in our Typescript code using a formatDate function? This function has the same signature as the date pipe, which makes perfect sense because… That’s the function used by the pipe itself (source code here): […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,16],"tags":[],"class_list":["post-297","post","type-post","status-publish","format-standard","hentry","category-angular","category-date-formatting"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/297","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=297"}],"version-history":[{"count":6,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/297\/revisions"}],"predecessor-version":[{"id":315,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/297\/revisions\/315"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
And by the way, similar functions<\/a> are available for numbers, currencies, and percentages:<\/p>\n\n\n\n