From fd696212ba674d87d12233fa42b86caac45cef5a Mon Sep 17 00:00:00 2001 From: Roberto Simonetti Date: Fri, 12 May 2017 10:12:09 +0200 Subject: [PATCH] Docs: upgrade version --- README.md | 77 ++++++++++++++- doc/quick-start.md | 142 ++++++++++++++------------- doc/spec.md | 240 +++++++++++++++++++++++++-------------------- 3 files changed, 281 insertions(+), 178 deletions(-) diff --git a/README.md b/README.md index 0a46c72f..23a119df 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ _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_ | - | - | numbers validation +_Validation_ | - | - | number validation ## Installing You can add `angular-l10n` to your project using `npm`: @@ -50,9 +50,80 @@ and use global `ng.l10n` namespace. This library is compatible with AoT compilation & Server-side prerendering. It also supports the `strict` TypeScript compiler option. ## Usage -**Angular v4**: [quick start](https://github.com/robisim74/angular-l10n/blob/master/doc/quick-start.md) and [library specification](https://github.com/robisim74/angular-l10n/blob/master/doc/spec.md). +**_Configuration_** +```TypeScript +@NgModule({ + imports: [ + ... + HttpModule, + LocalizationModule.forRoot() + ], + ... +}) +export class AppModule { -**Angular v2**: [branch](https://github.com/robisim74/angular-l10n/tree/angular_v2). + constructor(public locale: LocaleService, public translation: TranslationService) { + this.locale.addConfiguration() + .addLanguages(['en', 'it']) + .setCookieExpiration(30) + .defineDefaultLocale('en', 'US') + .defineCurrency('USD'); + this.locale.init(); + + this.translation.addConfiguration() + .addProvider('./assets/locale-'); + this.translation.init(); + } + +} +``` +**_Pure pipes with Decorators_** +```TypeScript +@Component({ + ... + template: ` +

{{ 'Greeting' | translate:lang }}

+ +

{{ today | localeDate:defaultLocale:'fullDate' }}

+

{{ pi | localeDecimal:defaultLocale:'1.5-5' }}

+

{{ value | localeCurrency:defaultLocale:currency:true:'1.2-2' }}

+ ` +}) +export class HomeComponent implements OnInit { + + @Language() lang: string; + @DefaultLocale() defaultLocale: string; + @Currency() currency: string; + + ... + + ngOnInit(): void { + // + } + +} +``` +**_Directives_** +```TypeScript +@Component({ + ... + template: ` +

Greeting

+ +

{{ today }}

+

{{ pi }}

+

{{ value }}

+ ` +}) +export class HomeComponent { + ... +} +``` +See the following documentation to learn more about all the features: + +- **Angular v4**: [quick start](https://github.com/robisim74/angular-l10n/blob/master/doc/quick-start.md) and [library specification](https://github.com/robisim74/angular-l10n/blob/master/doc/spec.md) + +- **Angular v2**: [branch](https://github.com/robisim74/angular-l10n/tree/angular_v2) ## Related projects [Angular Localization with an ASP.NET CORE MVC Service](https://damienbod.com/2016/04/29/angular-2-localization-with-an-asp-net-core-mvc-service/) @damienbod diff --git a/doc/quick-start.md b/doc/quick-start.md index 1af96efc..452bd3b3 100644 --- a/doc/quick-start.md +++ b/doc/quick-start.md @@ -24,7 +24,7 @@ System.config({ ... }); ``` -Import the modules and the components you need in `app.module.ts`: +Import the modules you need and configure the services in `app.module.ts`: ```TypeScript import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; @@ -33,7 +33,7 @@ import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; import { HomeComponent } from './home.component'; -import { TranslationModule } from 'angular-l10n'; +import { TranslationModule, LocaleService, TranslationService } from 'angular-l10n'; @NgModule({ imports: [ @@ -44,13 +44,27 @@ import { TranslationModule } from 'angular-l10n'; declarations: [AppComponent, HomeComponent], bootstrap: [AppComponent] }) -export class AppModule { } +export class AppModule { + + constructor(public locale: LocaleService, public translation: TranslationService) { + this.locale.addConfiguration() + .addLanguages(['en', 'it']) + .setCookieExpiration(30) + .defineLanguage('en'); + this.locale.init(); + + this.translation.addConfiguration() + .addProvider('./assets/locale-'); + this.translation.init(); + } + +} ``` -Add to `app.component.ts` the initialization of the services: +Add to `app.component.ts`: ```TypeScript -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; -import { Translation, LocaleService, TranslationService } from 'angular-l10n'; +import { LocaleService, Language } from 'angular-l10n'; @Component({ selector: 'my-app', @@ -65,20 +79,14 @@ import { Translation, LocaleService, TranslationService } from 'angular-l10n'; ` }) -export class AppComponent extends Translation { +export class AppComponent implements OnInit { - constructor(public locale: LocaleService, public translation: TranslationService) { - super(translation); + @Language() lang: string; - this.locale.addConfiguration() - .addLanguages(['en', 'it']) - .setCookieExpiration(30) - .defineLanguage('en'); - this.locale.init(); + constructor(public locale: LocaleService) { } - this.translation.addConfiguration() - .addProvider('./assets/locale-'); - this.translation.init(); + ngOnInit(): void { + // } selectLanguage(language: string): void { @@ -86,13 +94,12 @@ export class AppComponent extends Translation { } } - ``` Add `home.component.ts`: ```TypeScript -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; -import { Translation, TranslationService } from 'angular-l10n'; +import { Language } from 'angular-l10n'; @Component({ selector: 'home-component', @@ -100,15 +107,17 @@ import { Translation, TranslationService } from 'angular-l10n';

{{ 'Greeting' | translate:lang }}

` }) -export class HomeComponent extends Translation { +export class HomeComponent implements OnInit { - constructor(public translation: TranslationService) { - super(translation); + @Language() lang: string; + + ngOnInit(): void { + // } } ``` -and create the _json_ files of the translations such as `locale-en.json` and `locale-it.json` in `assets` folder: +and create the _json_ files of the translations such as `locale-en.json` and `locale-it.json` in `src/assets` folder: ```Json { "Title": "Angular localization", @@ -137,7 +146,7 @@ import { Component } from '@angular/core'; export class HomeComponent { } ``` Note that if you use in the component only the _directives_ and not the _pipes_, -you don't need to import the services and extend `Translation` class. +you don't need to use `@Language()` _decorator_. For more details, see [library specification](https://github.com/robisim74/angular-l10n/blob/master/doc/spec.md). @@ -157,7 +166,7 @@ System.config({ ... }); ``` -Import the modules and the components you need in `app.module.ts`: +Import the modules you need and configure the services in `app.module.ts`: ```TypeScript import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; @@ -166,7 +175,7 @@ import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; import { HomeComponent } from './home.component'; -import { LocalizationModule } from 'angular-l10n'; +import { LocalizationModule, LocaleService, TranslationService } from 'angular-l10n'; @NgModule({ imports: [ @@ -177,13 +186,28 @@ import { LocalizationModule } from 'angular-l10n'; declarations: [AppComponent, HomeComponent], bootstrap: [AppComponent] }) -export class AppModule { } +export class AppModule { + + constructor(public locale: LocaleService, public translation: TranslationService) { + this.locale.addConfiguration() + .addLanguages(['en', 'it']) + .setCookieExpiration(30) + .defineDefaultLocale('en', 'US') + .defineCurrency('USD'); + this.locale.init(); + + this.translation.addConfiguration() + .addProvider('./assets/locale-'); + this.translation.init(); + } + +} ``` -Add to `app.component.ts` the initialization of the services: +Add to `app.component.ts`: ```TypeScript -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; -import { Localization, LocaleService, TranslationService } from 'angular-l10n'; +import { LocaleService, Language } from 'angular-l10n'; @Component({ selector: 'my-app', @@ -199,21 +223,14 @@ import { Localization, LocaleService, TranslationService } from 'angular-l10n'; ` }) -export class AppComponent extends Localization { +export class AppComponent implements OnInit { - constructor(public locale: LocaleService, public translation: TranslationService) { - super(locale, translation); + @Language() lang: string; - this.locale.addConfiguration() - .addLanguages(['en', 'it']) - .setCookieExpiration(30) - .defineDefaultLocale('en', 'US') - .defineCurrency('USD'); - this.locale.init(); + constructor(public locale: LocaleService) { } - this.translation.addConfiguration() - .addProvider('./assets/locale-'); - this.translation.init(); + ngOnInit(): void { + // } selectLocale(language: string, country: string, currency: string): void { @@ -223,7 +240,7 @@ export class AppComponent extends Localization { } ``` -and create the _json_ files of the translations such as `locale-en.json` and `locale-it.json` in `assets` folder: +and create the _json_ files of the translations such as `locale-en.json` and `locale-it.json` in `src/assets` folder: ```Json { "Title": "Angular localization", @@ -240,9 +257,9 @@ and create the _json_ files of the translations such as `locale-en.json` and `lo ``` Add `home.component.ts`: ```TypeScript -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; -import { Localization, LocaleService, TranslationService } from 'angular-l10n'; +import { Language, DefaultLocale, Currency } from 'angular-l10n'; @Component({ selector: 'home-component', @@ -254,21 +271,23 @@ import { Localization, LocaleService, TranslationService } from 'angular-l10n'; ` }) -export class HomeComponent extends Localization { +export class HomeComponent implements OnInit { + + @Language() lang: string; + @DefaultLocale() defaultLocale: string; + @Currency() currency: string; today: number; pi: number; value: number; - constructor(public locale: LocaleService, public translation: TranslationService) { - super(locale, translation); - + ngOnInit(): void { this.today = Date.now(); this.pi = 3.14159; this.value = Math.round(Math.random() * 1000000) / 100; } - change() { + change(): void { this.value = Math.round(Math.random() * 1000000) / 100; } @@ -279,17 +298,9 @@ Finally, to extend the support to all browsers, add the following script tag in ``` #### Using directives -In addition to the _pipes_, you can use _directives_. Try to change in `app.component.ts`: -```Html -

{{ 'TITLE' | translate:lang }}

-``` -into: -```Html -

Title

-``` -Then change `home.component.ts`: +In addition to the _pipes_, you can use _directives_. Try to change `home.component.ts`: ```TypeScript -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; @Component({ selector: 'home-component', @@ -301,26 +312,26 @@ import { Component } from '@angular/core'; ` }) -export class HomeComponent { +export class HomeComponent implements OnInit { today: number; pi: number; value: number; - constructor() { + ngOnInit(): void { this.today = Date.now(); this.pi = 3.14159; this.value = Math.round(Math.random() * 1000000) / 100; } - change() { + change(): void { this.value = Math.round(Math.random() * 1000000) / 100; } } ``` Note that if you use in the component only the _directives_ and not the _pipes_, -you don't need to import the services and extend `Localization` class. +you don't need to use _decorators_. For more details, see [library specification](https://github.com/robisim74/angular-l10n/blob/master/doc/spec.md). @@ -418,4 +429,3 @@ Always configure your provider in this way: this.translation.addConfiguration() .addProvider('./assets/locale-'); ``` - diff --git a/doc/spec.md b/doc/spec.md index ab188d2c..98d25c42 100644 --- a/doc/spec.md +++ b/doc/spec.md @@ -1,5 +1,5 @@ # Angular localization library specification -Library version: 3.1.0 +Library version: 3.2.0 ## Table of contents * [1 Library structure](#1) @@ -14,7 +14,7 @@ Library version: 3.1.0 * [3.1.1 Messages](#3.1.1) * [3.1.2 Dates & Numbers](#3.1.2) * [3.1.3 OnPush ChangeDetectionStrategy](#3.1.3) - * [3.1.4 ngOnDestroy method](#3.1.4) + * [3.1.4 Translation & Localization classes](#3.1.4) * [3.2 Directives](#3.2) * [3.3 Using Html tags in translation](#3.3) * [3.4 Getting the translation in component class](#3.4) @@ -39,15 +39,13 @@ Class | Contract ----- | -------- `LocaleService` | Manages language, default locale & currency `TranslationService` | Manages the translation data -`Translation` | Extend this class in components to provide _lang_ to the _translate_ pipe -`Localization` | Extend this class in components to provide _lang_, _defaultLocale_ & _currency_ to the translate and locale pipes `LocaleValidation` | Provides the methods to convert strings according to default locale `Collator` | Intl.Collator APIs `IntlAPI` | Provides the methods to check if Intl APIs are supported ## 2 Configuration ### 2.1 First scenario: you only need to translate messages -Import the modules you need in the application root module: +Import the modules you need and configure the services in the application root module: ```TypeScript @NgModule({ imports: [ @@ -58,24 +56,24 @@ Import the modules you need in the application root module: declarations: [AppComponent], bootstrap: [AppComponent] }) -export class AppModule { } -``` -Configure the services in the application root module or bootstrap component: -```TypeScript -constructor(public locale: LocaleService, public translation: TranslationService) { - this.locale.addConfiguration() - .addLanguages(['en', 'it']) - .setCookieExpiration(30) - .defineLanguage('en'); - this.locale.init(); - - this.translation.addConfiguration() - .addProvider('./assets/locale-'); - this.translation.init(); +export class AppModule { + + constructor(public locale: LocaleService, public translation: TranslationService) { + this.locale.addConfiguration() + .addLanguages(['en', 'it']) + .setCookieExpiration(30) + .defineLanguage('en'); + this.locale.init(); + + this.translation.addConfiguration() + .addProvider('./assets/locale-'); + this.translation.init(); + } + } ``` ### 2.2 Second scenario: you need to translate messages, dates & numbers -Import the modules you need in the application root module: +Import the modules you need and configure the services in the application root module: ```TypeScript @NgModule({ imports: [ @@ -86,21 +84,21 @@ Import the modules you need in the application root module: declarations: [AppComponent], bootstrap: [AppComponent] }) -export class AppModule { } -``` -Configure the services in the application root module or bootstrap component: -```TypeScript -constructor(public locale: LocaleService, public translation: TranslationService) { - this.locale.addConfiguration() - .addLanguages(['en', 'it']) - .setCookieExpiration(30) - .defineDefaultLocale('en', 'US') - .defineCurrency('USD'); - this.locale.init(); - - this.translation.addConfiguration() - .addProvider('./assets/locale-'); - this.translation.init(); +export class AppModule { + + constructor(public locale: LocaleService, public translation: TranslationService) { + this.locale.addConfiguration() + .addLanguages(['en', 'it']) + .setCookieExpiration(30) + .defineDefaultLocale('en', 'US') + .defineCurrency('USD'); + this.locale.init(); + + this.translation.addConfiguration() + .addProvider('./assets/locale-'); + this.translation.init(); + } + } ``` @@ -151,10 +149,9 @@ You can add all the providers you need: ```TypeScript this.translation.addConfiguration() .addProvider('./assets/locale-') - .addProvider('./assets/global-') - ... + .addProvider('./assets/global-'); ``` -*N.B. You can't use Direct and Asynchronous loading at the same time.* +*You can't use Direct and Asynchronous loading at the same time.* #### Asynchronous loading through a Web API You can also load the data through a Web API: @@ -166,19 +163,19 @@ this.translation.translationError.subscribe((error: any) => console.log(error)); this.translation.init(); ``` -`[path]{languageCode}` will be the URL used by the Http GET requests. So the example URL will be something like: `http://localhost:54703/api/values/en`. +`[path]{languageCode}` will be the URL used by the Http GET requests. So the example URI will be something like: `http://localhost:54703/api/values/en`. The example above also showed as you can perform a custom action if you get a bad response. ### 2.4 Default locale The default locale contains the current language and culture. It consists of: -* `language code`: ISO 639 two-letter or three-letter code of the language; -* `country code`: ISO 3166 two-letter, uppercase code of the country; +* `language code`: ISO 639 two-letter or three-letter code of the language +* `country code`: ISO 3166 two-letter, uppercase code of the country and optionally: -- `script code`: used to indicate the script or writing system variations that distinguish the written forms of a language or its dialects. It consists of four letters and was defined according to the assignments found in ISO 15924; -- `numbering system`: possible values include: "arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt"; -- `calendar`: possible values include: "buddhist", "chinese", "coptic", "ethioaa", "ethiopic", "gregory", "hebrew", "indian", "islamic", "islamicc", "iso8601", "japanese", "persian", "roc". +- `script code`: used to indicate the script or writing system variations that distinguish the written forms of a language or its dialects. It consists of four letters and was defined according to the assignments found in ISO 15924 +- `numbering system`: possible values include: "arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt" +- `calendar`: possible values include: "buddhist", "chinese", "coptic", "ethioaa", "ethiopic", "gregory", "hebrew", "indian", "islamic", "islamicc", "iso8601", "japanese", "persian", "roc" For more information see [Intl API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl). @@ -191,10 +188,10 @@ Just add one script tag in your `index.html`: ``` When specifying the `features`, you have to specify what locale, or locales to load. -*N.B. When a feature is not supported, however, for example in older browsers, Angular localization does not generate an error in the browser, but returns the value without performing operations.* +*When a feature is not supported, however, for example in older browsers, Angular localization does not generate an error in the browser, but returns the value without performing operations.* ## 3 Getting the translation -To get the translation, this library uses _pure pipes_ (to know the difference between _pure_ and _impure pipes_ see [here](https://angular.io/docs/ts/latest/guide/pipes.html)) or directives. +To get the translation, this library uses _pure pipes_ (to know the difference between _pure_ and _impure pipes_ see [here](https://angular.io/docs/ts/latest/guide/pipes.html)) or _directives_. You can also get the translation in component class. ### 3.1 Pure pipes @@ -207,6 +204,19 @@ Number | Percentage | `expression \| localePercent[:defaultLocale[:digitInfo]]` Number | Currency | `expression \| localeCurrency[:defaultLocale[:currency[:symbolDisplay[:digitInfo]]]]` #### 3.1.1 Messages +Implement _Language_ decorator in the component to provide the parameter to the _translate_ pipe: +```TypeScript +export class HomeComponent implements OnInit { + + @Language() lang: string; + + ngOnInit(): void { + // + } + +} +``` +*To use AoT compilation you have to implement OnInit and it would be better also OnDestroy, even if they are empty.* ``` expression | translate:lang ``` @@ -220,17 +230,6 @@ _Json_: "Title": "Angular localization" } ``` -Extend `Translation` class in the component to provide _lang_ to the _translate_ pipe: -```TypeScript -export class HomeComponent extends Translation { - - constructor(public translation: TranslationService) { - super(translation); - ... - } - -} -``` ##### Composed keys ```Html {{ 'Home.Title' | translate:lang }} @@ -255,17 +254,20 @@ _Json_: ``` #### 3.1.2 Dates & Numbers -Extend `Localization` class in the component to provide _defaultLocale_ & _currency_ to the locale pipes: +Implement _DefaultLocale_ & _Currency_ decorators in the component to provide the parameters to _localeDecimal_, _localePercent_ & _localeCurrency_ pipes. ```TypeScript -export class HomeComponent extends Localization { +export class HomeComponent implements OnInit { - constructor(public locale: LocaleService, public translation: TranslationService) { - super(locale, translation); - ... + @DefaultLocale() defaultLocale: string; + @Currency() currency: string; + + ngOnInit(): void { + // } -} +} ``` +*To use AoT compilation you have to implement OnInit and it would be better also OnDestroy, even if they are empty.* ##### Dates ``` expression | localeDate[:defaultLocale[:format]] @@ -300,37 +302,45 @@ where `symbolDisplay` is a boolean indicating whether to use the currency symbol ```Html {{ value | localeCurrency:defaultLocale:currency:true:'1.2-2' }} ``` -*N.B. You can dynamically change parameters and expressions values.* +*You can dynamically change parameters and expressions values.* #### 3.1.3 OnPush ChangeDetectionStrategy -_Pure pipes_ don't need to set `ChangeDetectionStrategy` to `OnPush`: if into your components you need to use it, when you extend `Translation` or `Localization` classes you have also to pass `ChangeDetectorRef`: +_Pure pipes_ don't need to set `ChangeDetectionStrategy` to `OnPush`. If into your components you need to use it, you have to provide `InjectorRef`: ```TypeScript -export class HomeComponent extends Localization { +import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; - constructor(public locale: LocaleService, public translation: TranslationService, public cd: ChangeDetectorRef) { - super(locale, translation, cd); - ... +import { Language, InjectorRef } from './src/angular-l10n' + +@Component({ + ... + viewProviders: [InjectorRef], + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class HomeComponent { + + @Language() lang: string; + + constructor(public injector: InjectorRef) { } + + ngOnInit(): void { + // } -} +} ``` -#### 3.1.4 ngOnDestroy method -When you extend `Translation` or `Localization` classes, the component inherits -`ngOnDestroy` method that cancels the subscriptions to update the pipes parameters. -If you override the `ngOnDestroy` method in your component to cancel its subscriptions, -you should call also `cancelPipesSubscriptions`: +#### 3.1.4 Translation & Localization classes +When using _pipes_, alternatively to _decorators_ you could +extend `Translation` or `Localization` classes. + +Extend `Translation` class in the component to provide _lang_ to the _translate_ pipe: ```TypeScript -ngOnDestroy() { - // Cancels the subscriptions of the component. - this.subscriptions.forEach((subscription: ISubscription) => { - if (typeof subscription !== "undefined") { - subscription.unsubscribe(); - } - }); - - this.cancelPipesSubscriptions(); -} +export class HomeComponent extends Translation { } +``` +Extend `Localization` class in the component to provide _lang_, _defaultLocale_ & _currency_ +to the _localeDecimal_, _localePercent_ & _localeCurrency_ pipes. +```TypeScript +export class HomeComponent extends Localization { } ``` ### 3.2 Directives @@ -364,9 +374,22 @@ Parameters:

{{ value }}

{{ value }}

``` -*N.B. You can dynamically change attributes, parameters and expressions values. -If you use in the component only the directives and not the pipes, -you don't need to import services and extend `Translation` or `Localization` classes.* +*You can dynamically change attributes, parameters and expressions values, as with pipes.* + +*You can properly translate UI components like Angular material:* +```Html +App.Home +``` +rendered as: +```Html + +
+
+ App.Home +
+ +``` +*If you use in the component only the directives and not the pipes, you don't need to use decorators.* ### 3.3 Using Html tags in translation If you have Html tags in translation like this: @@ -375,11 +398,11 @@ If you have Html tags in translation like this: ``` you have to use `innerHTML` attribute. -Using pipes: +Using _pipes_: ```Html

``` -Using directives: +Using _directives_: ```Html

``` @@ -397,12 +420,14 @@ _you must also_ subscribe to the following event: @Component({ template: '

{{ title }}

' }) -export class HomeComponent { +export class HomeComponent implements OnInit { // Initializes 'title' with the current translation at the time of the component loading. title: string = this.translation.translate('Title'); - constructor(public translation: TranslationService) { + constructor(public translation: TranslationService) { } + + ngOnInit(): void { this.translation.translationChanged.subscribe( // When the language changes, refreshes 'title' with the new translation. () => { this.title = this.translation.translate('Title'); } @@ -418,14 +443,13 @@ To get the translation of dates and numbers, you have the `getDefaultLocale` met template: '

{{ value }}

' }) export class HomeComponent { + + pipe: LocaleDecimalPipe = new LocaleDecimalPipe(); + value: number = pipe.transform(1234.5, this.locale.getDefaultLocale(), '1.2-2'); - value: number; - - constructor(public locale: LocaleService,) { - let pipe = new LocaleDecimalPipe(); - - this.value = pipe.transform(1234.5, this.locale.getDefaultLocale(), '1.2-2'); + constructor(public locale: LocaleService,) { } + ngOnInit(): void { this.locale.defaultLocaleChanged.subscribe( () => { this.value = pipe.transform(1234.5, this.locale.getDefaultLocale(), '1.2-2'); @@ -445,7 +469,9 @@ To change language, default locale or currency at runtime, `LocaleService` has t ## 5 Lazy loading If you use a `Router` in an extended application, you can create an instance of the `TranslationService` with its own translation data for every lazy loaded module/component, as shown: ![LazyLoading](images/LazyLoading.png) -You can create a new instance of `TranslationService` calling the `forChild` method of the module you are using: +You can create a new instance of `TranslationService` calling the `forChild` method of the module you are using, +and configure the service in the component with the new provider: + ```TypeScript @NgModule({ imports: [ @@ -454,11 +480,7 @@ You can create a new instance of `TranslationService` calling the `forChild` met ], declarations: [ListComponent] }) -export class ListModule { } -``` -then you have to configure the service in the component with the new provider: -```TypeScript -export class ListComponent { +export class ListModule { constructor(public translation: TranslationService) { this.translation.addConfiguration() @@ -514,7 +536,7 @@ onSubmit(value: string): void { #### 6.1.2 FormBuilder If you use `validateLocaleNumber` with `FormBuilder`, you have to invoke the following function: ```TypeScript -export declare function validateLocaleNumber(locale: LocaleService, digits: string, MIN_VALUE?: number, MAX_VALUE?: number): Function; +validateLocaleNumber(digits: string, MIN_VALUE?: number, MAX_VALUE?: number): Function ``` ## 7 Collator @@ -526,7 +548,7 @@ export declare function validateLocaleNumber(locale: LocaleService, digits: stri These methods use the [Intl.Collator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator) object, a constructor for collators, objects that enable language sensitive string comparison. -*N.B. This feature is not supported by all browsers, even with the use of `Intl.js`.* +*This feature is not supported by all browsers, even with the use of `Intl.js`.* ## 8 Services APIs @@ -589,6 +611,6 @@ Method | Function ### 8.5 IntlAPI Method | Function ------ | -------- -`static HasDateTimeFormat(): boolean` | -`static HasNumberFormat(): boolean` | -`static HasCollator(): boolean` | +`static hasDateTimeFormat(): boolean` | +`static hasNumberFormat(): boolean` | +`static hasCollator(): boolean` |