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: 23 days 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\)