{"id":13808312,"url":"https://github.com/code-art-eg/angular-globalize","last_synced_at":"2026-01-18T01:56:23.665Z","repository":{"id":43038633,"uuid":"121186187","full_name":"code-art-eg/angular-globalize","owner":"code-art-eg","description":"Angular pipes for localizing numbers and dates using Globalize.","archived":false,"fork":false,"pushed_at":"2024-11-18T22:42:51.000Z","size":4860,"stargazers_count":1,"open_issues_count":4,"forks_count":0,"subscribers_count":1,"default_branch":"dev","last_synced_at":"2025-04-11T15:11:23.620Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/code-art-eg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-02-12T01:31:36.000Z","updated_at":"2024-07-29T23:36:00.000Z","dependencies_parsed_at":"2023-02-05T02:00:36.303Z","dependency_job_id":"ac99e9f1-b9e0-4481-9f69-42bf0734d0f4","html_url":"https://github.com/code-art-eg/angular-globalize","commit_stats":null,"previous_names":["sherif-elmetainy/angular-globalize"],"tags_count":46,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-art-eg%2Fangular-globalize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-art-eg%2Fangular-globalize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-art-eg%2Fangular-globalize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-art-eg%2Fangular-globalize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/code-art-eg","download_url":"https://codeload.github.com/code-art-eg/angular-globalize/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253852356,"owners_count":21973912,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T01:01:39.802Z","updated_at":"2026-01-18T01:56:23.598Z","avatar_url":"https://github.com/code-art-eg.png","language":"TypeScript","readme":"# @code-art-eg/angular-globalize\n\n## About the library\n\nThe ```@code-art-eg/angular-globalize``` library is a javascript library that provides pipes for date, number and currency formatting for [Angular 17](https://angular.io).\nIt also provides services for parsing and formatting dates and numbers as well as setting the current culture. It depends on and leverages the [globalize](https://github.com/globalizejs) javascript library for performing this.\n\n## Consuming the library\n\n### 1. Installing the library\n\nTo install the library in your Angular application you need to run the following commands:\n\n```bash\n$ ng add @code-art-eg/angular-globalize\n```\n**Note:** *Since version 3.x of this library was rewritten, Versions 1.x and 2.x of the library available on npmjs are not compatible with this version.*\n\n**Note 2:** *Starting from version 8, the major version numbers of the library now follows the major angular version supported.*\n\n\n### 2. Use the library pipes in your components\n\nOnce the library is imported and cldr data is loaded, you can use its components, directives and pipes in your Angular application:\n\n```html\n\u003c!-- You can now use the library component in app.component.html --\u003e\n\u003ch1\u003e\n  {{title}}\n\u003c/h1\u003e\nShort Date (current culture): {{ jsDate | gdate }} \u003cbr/\u003e\u003c!-- example output 10/02/2018 using en-GB --\u003e\nShort time (current culture): {{ jsDate | gtime }} \u003cbr/\u003e\u003c!-- example output 13:49 using en-GB --\u003e\nShort date/time (current culture): {{ jsDate | gdatetime }} \u003cbr/\u003e\u003c!-- example output 10/02/2018, 13:49 using en-GB--\u003e\nShort Date (German Germany): {{ jsDate | gdate:'de' }} \u003cbr/\u003e\u003c!-- example output 10.02.18 --\u003e\nFull Date (Arabic Egypt):  {{ jsDate | gdatetime:'ar-EG':'full' }} \u003cbr/\u003e\u003c!-- example output السبت، ١٠ فبراير ٢٠١٨ ١:٤٩:٢٠ م غرينتش+٠٢:٠٠ --\u003e\nFull Date (Current culture): {{ jsDate | gdatetime:'full' }} \u003cbr/\u003e\u003c!-- example output Saturday, 10 February 2018 at 13:49:20 GMT+02:00 using en-GB --\u003e\nCustom Date Format (Current culture): {{ jsDate | gdatetime:'raw:yyyy-MM-dd' }} \u003cbr/\u003e\u003c!-- example output 2018-02-10 --\u003e\nCustom Date Format (Current culture): {{ jsDate | gdatetime:'yQQQHm' }} \u003cbr/\u003e\u003c!-- example output Q1 2018, 13:49 --\u003e\nCustom Date Format (Arabic Egypt): {{ jsDate | gdatetime:'ar-EG':'yQQQHm'}} \u003cbr/\u003e\u003c!-- example output الربع الأول ٢٠١٨ ١٣:٤٩ --\u003e\n\nNumber Format (Current culture): {{ 1234567.98765 | gnumber }} \u003cbr/\u003e\u003c!-- example output 1,234,567.988 --\u003e\nPercentage Format (Current culture): {{ 0.5| gnumber:'%' }} \u003cbr/\u003e\u003c!-- example output 50% --\u003e\nCurrency  Format with symbol (Current culture): {{ 1234567.98765 | gcurrency:'EUR'}} \u003cbr/\u003e\u003c!-- example output €1,234,567.99 --\u003e\nCurrency  Format with name (Arabic Egypt): {{ 1234567.98765 | gcurrency:'EGP':'ar-EG':{ style: 'name', maximumFractionDigits:3, minimumFractionDigits:3 } }} \u003cbr/\u003e\u003c!-- example output ١٬٢٣٤٬٥٦٧٫٩٨٨ جنيه مصري --\u003e\n``` \n\n## Getting/Setting Current Culture\n\nBy default the library will use the value provided by [LOCALE_ID](https://angular.io/api/core/LOCALE_ID) in Angular. If not available, it will use the browser culture. However, the current culture will always be one of the supported cultures. If the The LOCALE_ID or browser culture are not in the supported cultures, the first culture will be used as the default. To change current culture you can is the ```CurrentCultureService``` service which can be injected in your component or service.\n\nExample: \n\n```typescript\nimport { Component } from '@angular/core';\n\nimport { CurrentCultureService } from '@code-art-eg/angular-globalize';\n\n@Component({\n    selector: 'app-change-culture',\n    template: `\n        \u003cbutton (click)=\"changeCulture('en-GB')\"\u003eEnglish (United Kingdom)\u003c/button\u003e\n        \u003cbutton (click)=\"changeCulture('ar-EG')\"\u003eArabic (Egypt)\u003c/button\u003e\n        \u003cbutton (click)=\"changeCulture('de')\"\u003eGerman (Germany)\u003c/button\u003e\n    `\n})\nexport class ChangeCultureComponent {\n    constructor(public readonly cultureService: CurrentCultureService) {\n    }\n    \n    public changeCulture(culture: string): void {\n        this.cultureService.currentCulture = culture;\n    }\n}\n```\n\nIn addition to the `currentCulture` property, the `CurrentCultureService` interface exposes a `cultureObservable` property of type `Observable\u003cstring\u003e` which you can use to subscribe to current culture change events.\n\n## (Optional) Saving Culture between sessions\n\nThe component exposes ```CookieLocaleProviderService``` and ```StorageLocaleProviderService``` services. You an you can provide either one of them in your ```AppModule``` using ```CANG_LOCALE_PROVIDER``` injection token. \n\nExample:\n\n```typescript \n@NgModule({\n    bootstrap: [AppComponent],\n    declarations: [AppComponent, ChangeCultureComponent],\n    imports: [BrowserModule,\n         AngularGlobalizeModule.forRoot(['en-GB', 'de', 'ar-EG']), // Import this only in root app module\n         AngularGlobalizeModule, // import this in every module where the pipes and directives are needed.\n        ],\n    providers: [\n        { provide: CANG_LOCALE_PROVIDER, useClass: CookieLocaleProviderService, multi: true },\n    ]\n})\nclass AppModule {\n    ...\n}\n```\n\n## TODO\n\nThe library needs better documentation, more samples and a demo site. In the future I plan to add support for other features exposed by Globalize such as units, messages, pluralization, etc.\n\n## License\n\nMIT © Sherif Elmetainy \\(Code Art\\)\n","funding_links":[],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode-art-eg%2Fangular-globalize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcode-art-eg%2Fangular-globalize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode-art-eg%2Fangular-globalize/lists"}