Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/code-art-eg/angular-globalize

Angular pipes for localizing numbers and dates using Globalize.
https://github.com/code-art-eg/angular-globalize

Last synced: 2 months ago
JSON representation

Angular pipes for localizing numbers and dates using Globalize.

Awesome Lists containing this project

README 

        
# @code-art-eg/angular-globalize



## About the library



The ```@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).

It 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.



## Consuming the library



### 1. Installing the library



To install the library in your Angular application you need to run the following commands:



```bash

$ ng add @code-art-eg/angular-globalize

```

**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.*



**Note 2:** *Starting from version 8, the major version numbers of the library now follows the major angular version supported.*



### 2. Use the library pipes in your components



Once the library is imported and cldr data is loaded, you can use its components, directives and pipes in your Angular application:



```html





  {{title}}



Short Date (current culture): {{ jsDate | gdate }} 


Short time (current culture): {{ jsDate | gtime }} 


Short date/time (current culture): {{ jsDate | gdatetime }} 


Short Date (German Germany): {{ jsDate | gdate:'de' }} 


Full Date (Arabic Egypt):  {{ jsDate | gdatetime:'ar-EG':'full' }} 


Full Date (Current culture): {{ jsDate | gdatetime:'full' }} 


Custom Date Format (Current culture): {{ jsDate | gdatetime:'raw:yyyy-MM-dd' }} 


Custom Date Format (Current culture): {{ jsDate | gdatetime:'yQQQHm' }} 


Custom Date Format (Arabic Egypt): {{ jsDate | gdatetime:'ar-EG':'yQQQHm'}} 



Number Format (Current culture): {{ 1234567.98765 | gnumber }} 


Percentage Format (Current culture): {{ 0.5| gnumber:'%' }} 


Currency  Format with symbol (Current culture): {{ 1234567.98765 | gcurrency:'EUR'}} 


Currency  Format with name (Arabic Egypt): {{ 1234567.98765 | gcurrency:'EGP':'ar-EG':{ style: 'name', maximumFractionDigits:3, minimumFractionDigits:3 } }} 


``` 



## Getting/Setting Current Culture



By 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.



Example: 



```typescript

import { Component } from '@angular/core';



import { CurrentCultureService } from '@code-art-eg/angular-globalize';



@Component({

    selector: 'app-change-culture',

    template: `

        English (United Kingdom)

        Arabic (Egypt)

        German (Germany)

    `

})

export class ChangeCultureComponent {

    constructor(public readonly cultureService: CurrentCultureService) {

    }

    

    public changeCulture(culture: string): void {

        this.cultureService.currentCulture = culture;

    }

}

```



In addition to the `currentCulture` property, the `CurrentCultureService` interface exposes a `cultureObservable` property of type `Observable` which you can use to subscribe to current culture change events.



## (Optional) Saving Culture between sessions



The component exposes ```CookieLocaleProviderService``` and ```StorageLocaleProviderService``` services. You an you can provide either one of them in your ```AppModule``` using ```CANG_LOCALE_PROVIDER``` injection token. 



Example:



```typescript 

@NgModule({

    bootstrap: [AppComponent],

    declarations: [AppComponent, ChangeCultureComponent],

    imports: [BrowserModule,

         AngularGlobalizeModule.forRoot(['en-GB', 'de', 'ar-EG']), // Import this only in root app module

         AngularGlobalizeModule, // import this in every module where the pipes and directives are needed.

        ],

    providers: [

        { provide: CANG_LOCALE_PROVIDER, useClass: CookieLocaleProviderService, multi: true },

    ]

})

class AppModule {

    ...

}

```



## TODO



The 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.



## License



MIT © Sherif Elmetainy \(Code Art\)