Angular localization
An Angular library to translate messages, dates and numbers.
This library is for localization of Angular 2+ apps written in TypeScript, ES6 or ES5.
It allows, in addition to translation, to localize numbers and dates of your app, adding language code, country code, and optionally script code, numbering system and calendar, through Internationalization API. It also implements the validation of numbers by locales.
Sample app built with Angular Material, AoT compilation & webpack, and its source code.
Get the changelog by releases.
Angular i18n solutions
Feature | Angular Official | ngx-translate External library | angular-l10n External library |
---|
Messages | Html attributes, message IDs | directives, impure pipes | directives, pure pipes |
File formats | XLIFF, XMB/XTB | JSON | JSON |
No bootstrap (when language changes) | no | yes | yes |
Getting the translation in component class | not yet | yes | yes |
Numbers | pure pipes using CLDR | - | directives & pure pipes via Intl |
Dates | pure pipes using CLDR | - | directives & pure pipes via Intl |
Validation | - | - | numbers validation |
Installing
You can add angular-l10n
to your project using npm
:
npm install angular-l10n --save
To install the prerelease package:
npm install --save angular-l10n@next
Loading
Using SystemJS configuration
System.config({
map: {
'angular-l10n': 'node_modules/angular-l10n/bundles/angular-l10n.umd.js'
}
});
Angular CLI
No need to set up anything, just import it in your code.
Rollup or webpack
No need to set up anything, just import it in your code.
Plain JavaScript
If you build apps in Angular using ES5, you can include the umd
bundle in your index.html
:
<script src="node_modules/angular-l10n/bundles/angular-l10n.umd.js"></script>
and use global ng.l10n
namespace.
AoT compilation, Server Side Rendering & strict
This library is compatible with AoT compilation & Server Side Rendering. It also supports the strict
TypeScript compiler option.
Usage
Configuration
const l10nConfig: L10nConfig = {
locale: {
languages: [
{ code: 'en', dir: 'ltr' },
{ code: 'it', dir: 'ltr' }
],
defaultLocale: { languageCode: 'en', countryCode: 'US' },
currency: 'USD',
storage: StorageStrategy.Cookie
},
translation: {
providers: [
{ type: ProviderType.Static, prefix: './assets/locale-' }
],
caching: true,
missingValue: 'No key'
}
};
@NgModule({
imports: [
...
HttpClientModule,
LocalizationModule.forRoot(l10nConfig)
],
...
})
export class AppModule {
constructor(public l10nLoader: L10nLoader) {
this.l10nLoader.load();
}
}
Pure pipes with Decorators
@Component({
...
template: `
<p>{{ 'Greeting' | translate:lang }}</p>
<p title="{{ 'Greeting' | translate:lang }}">{{ 'Title' | translate:lang }}</p>
<p>{{ today | l10nDate:defaultLocale:'fullDate' }}</p>
<p>{{ pi | l10nDecimal:defaultLocale:'1.5-5' }}</p>
<p>{{ value | l10nCurrency:defaultLocale:currency:'symbol':'1.2-2' }}</p>
`
})
export class HomeComponent implements OnInit {
@Language() lang: string;
@DefaultLocale() defaultLocale: string;
@Currency() currency: string;
ngOnInit(): void { }
}
Directives
@Component({
...
template: `
<p l10nTranslate>Greeting</p>
<p l10n-title title="Greeting" l10nTranslate>Title</p>
<p l10nDate="fullDate">{{ today }}</p>
<p l10nDecimal="1.5-5">{{ pi }}</p>
<p l10nCurrency="1.2-2" [currencyDisplay]="'symbol'">{{ value }}</p>
`
})
export class HomeComponent {}
See the following documentation to learn more about all the features:
-
Angular v5
-
Angular v4
-
Angular v2
Related projects
Angular Localization with an ASP.NET CORE MVC Service @damienbod
Contributing
License
MIT