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 Native | ngx-translate External library | angular-l10n External library |
---|
Messages | Html attribute, message ID | directive, impure pipe | directive, pure pipe |
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 pipe via Intl | - | directive & pure pipe via Intl |
Dates | pure pipe via Intl | - | directive & pure pipe via Intl |
Validation | - | - | number validation |
Installing
You can add angular-l10n
to your project using npm
:
npm install angular-l10n --save
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 prerendering & strict
This library is compatible with AoT compilation & Server-side prerendering. It also supports the strict
TypeScript compiler option.
Usage
Configuration
@NgModule({
imports: [
...
HttpModule,
LocalizationModule.forRoot()
],
...
})
export class AppModule {
constructor(public locale: LocaleService, public translation: TranslationService) {
this.locale.addConfiguration()
.addLanguages(['en', 'it'])
.setCookieExpiration(30)
.defineDefaultLocale('en', 'US')
.defineCurrency('USD');
this.translation.addConfiguration()
.addProvider('./assets/locale-');
this.translation.init();
}
}
Pure pipes with Decorators
@Component({
...
template: `
<p>{{ 'Greeting' | translate:lang }}</p>
<p title="{{ 'Greeting' | translate:lang }}">{{ 'Title' | translate:lang }}</p>
<p>{{ today | localeDate:defaultLocale:'fullDate' }}</p>
<p>{{ pi | localeDecimal:defaultLocale:'1.5-5' }}</p>
<p>{{ value | localeCurrency:defaultLocale:currency:true:'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" [symbol]="true">{{ value }}</p>
`
})
export class HomeComponent {}
See the following documentation to learn more about all the features:
Related projects
Angular Localization with an ASP.NET CORE MVC Service @damienbod
Contributing
License
MIT