Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
angular-l10n
Advanced tools
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.
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 |
You can add angular-l10n
to your project using npm
:
npm install angular-l10n --save
System.config({
map: {
'angular-l10n': 'node_modules/angular-l10n/bundles/angular-l10n.umd.js'
}
});
No need to set up anything, just import it in your code.
No need to set up anything, just import it in your code.
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.
This library is compatible with AoT compilation & Server-side prerendering. It also supports the strict
TypeScript compiler option.
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:
Angular v4
Angular v2
Angular Localization with an ASP.NET CORE MVC Service @damienbod
MIT
FAQs
Angular library to translate texts, dates and numbers
The npm package angular-l10n receives a total of 7,232 weekly downloads. As such, angular-l10n popularity was classified as popular.
We found that angular-l10n demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.