Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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.
- Host: GitHub
- URL: https://github.com/code-art-eg/angular-globalize
- Owner: code-art-eg
- License: mit
- Created: 2018-02-12T01:31:36.000Z (almost 7 years ago)
- Default Branch: dev
- Last Pushed: 2024-09-24T03:28:35.000Z (3 months ago)
- Last Synced: 2024-11-07T23:42:47.916Z (about 1 month ago)
- Language: TypeScript
- Homepage:
- Size: 4.46 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - angular-globalize - Angular pipes for localizing numbers and dates using Globalize. (Table of contents / Third Party Components)
- fucking-awesome-angular - angular-globalize - Angular pipes for localizing numbers and dates using Globalize. (Table of contents / Third Party Components)
- fucking-awesome-angular - angular-globalize - Angular pipes for localizing numbers and dates using Globalize. (Table of contents / Third Party Components)
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\)