<commit_before>## Angular 2 Localization - Quick start

> This quick guide is for the complete scenario, when you need to translate messages (texts), dates, numbers or currencies.
> The sample is based on [Angular QuickStart](https://github.com/angular/quickstart).

Install the library:
```Shell
npm install angular2localization --save
```
Add the library to `systemjs.config.js` file (skip this step if you don't use SystemJS):
```JavaScript
        map: {
            ...
            // other libraries
            ...
            'angular2localization': 'npm:angular2localization/bundles/angular2localization.umd.js'
        }
```
Import the modules you need in `AppModule`:
```TypeScript
...
import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';

import { HttpModule } from '@angular/http';
// Angular 2 Localization.
import { LocaleModule, LocalizationModule } from 'angular2localization';

@NgModule({
    imports: [
        ...
        HttpModule,
        LocaleModule.forRoot(), // New instance of LocaleService.
        LocalizationModule.forRoot() // New instance of LocalizationService.
    ],
    declarations: [AppComponent, HomeComponent],
    ...
})

export class AppModule { }
```
Add in the bootstrap component `app.component.ts` in order to access the data of location from anywhere in the application:
```TypeScript
import { Component } from '@angular/core';
// Services.
import { Locale, LocaleService, LocalizationService } from 'angular2localization';

@Component({
    selector: 'my-app',
    template: `
        <h1>{{ 'TITLE' | translate:lang }}</h1>

        <h3>{{ 'CHANGE_COUNTRY' | translate:lang }}</h3>
        
        <a (click)="selectLocale('en', 'US', 'USD');">United States</a>
        <a (click)="selectLocale('en', 'GB', 'GBP');">United Kingdom</a>
        <a (click)="selectLocale('it', 'IT', 'EUR');">Italia</a>

        <home-component></home-component>
    `
})

export class AppComponent extends Locale {

    constructor(public locale: LocaleService, public localization: LocalizationService) {
        super(locale, localization);

        // Adds the languages (ISO 639 two-letter or three-letter code).
        this.locale.addLanguages(['en', 'it']);

        // Required: default language, country (ISO 3166 two-letter, uppercase code) and expiry (No days). If the expiry is omitted, the cookie becomes a session cookie.
        // Selects the default language and country, regardless of the browser language, to avoid inconsistencies between the language and country.
        this.locale.definePreferredLocale('en', 'US', 30);

        // Optional: default currency (ISO 4217 three-letter code).
        this.locale.definePreferredCurrency('USD');

        // Initializes LocalizationService: asynchronous loading.
        this.localization.translationProvider('./resources/locale-'); // Required: initializes the translation provider with the given path prefix.
        this.localization.updateTranslation(); // Need to update the translation.

    }
    
    // Sets a new locale & currency.
    selectLocale(language: string, country: string, currency: string): void {

        this.locale.setCurrentLocale(language, country);
        this.locale.setCurrentCurrency(currency);

    }

}
```
and create the _json_ files of the translations such as `locale-en.json` and `locale-it.json` in _resources_ folder:
```Json
{
    "TITLE": "Angular 2 Localization",
    "CHANGE_COUNTRY": "Change country"
}
```
```Json
{
    "TITLE": "Localizzazione in Angular 2",
    "CHANGE_COUNTRY": "Cambia Paese"
}
```
Add a component: `home.component.ts`:
```TypeScript
import { Component } from '@angular/core';
// Services.
import { Locale, LocaleService, LocalizationService } from 'angular2localization';

@Component({
    selector: 'home-component',
    template: `
        <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 extends Locale {

    today: number;
    pi: number;
    value: number;

    constructor(public locale: LocaleService, public localization: LocalizationService) {
        super(locale, localization);

        this.today = Date.now();
        this.pi = 3.14159;
        this.value = Math.round(Math.random() * 1000000) / 100;

    }
<commit_msg>Update Quick start<commit_after>## Angular 2 Localization - Quick start

> This quick guide is for the complete scenario, when you need to translate messages (texts), dates, numbers or currencies.
> The sample is based on [Angular QuickStart](https://github.com/angular/quickstart).

Install the library:
```Shell
npm install angular2localization --save
```
Add the library to `systemjs.config.js` file (skip this step if you don't use SystemJS):
```JavaScript
        map: {
            ...
            // other libraries
            ...
            'angular2localization': 'npm:angular2localization/bundles/angular2localization.umd.js'
        }
```
Import the modules you need in `app.module.ts`:
```TypeScript
...
import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';

import { HttpModule } from '@angular/http';
// Angular 2 Localization.
import { LocaleModule, LocalizationModule } from 'angular2localization';

@NgModule({
    imports: [
        ...
        HttpModule,
        LocaleModule.forRoot(), // New instance of LocaleService.
        LocalizationModule.forRoot() // New instance of LocalizationService.
    ],
    declarations: [AppComponent, HomeComponent],
    ...
})

export class AppModule { }
```
Add in the bootstrap component `app.component.ts` in order to access the data of location from anywhere in the application:
```TypeScript
import { Component } from '@angular/core';
// Services.
import { Locale, LocaleService, LocalizationService } from 'angular2localization';

@Component({
    selector: 'my-app',
    template: `
        <h1>{{ 'TITLE' | translate:lang }}</h1>

        <h3>{{ 'CHANGE_COUNTRY' | translate:lang }}</h3>
        
        <a (click)="selectLocale('en', 'US', 'USD');">United States</a>
        <a (click)="selectLocale('en', 'GB', 'GBP');">United Kingdom</a>
        <a (click)="selectLocale('it', 'IT', 'EUR');">Italia</a>

        <home-component></home-component>
    `
})

export class AppComponent extends Locale {

    constructor(public locale: LocaleService, public localization: LocalizationService) {
        super(locale, localization);

        // Adds the languages (ISO 639 two-letter or three-letter code).
        this.locale.addLanguages(['en', 'it']);

        // Required: default language, country (ISO 3166 two-letter, uppercase code) and expiry (No days). If the expiry is omitted, the cookie becomes a session cookie.
        // Selects the default language and country, regardless of the browser language, to avoid inconsistencies between the language and country.
        this.locale.definePreferredLocale('en', 'US', 30);

        // Optional: default currency (ISO 4217 three-letter code).
        this.locale.definePreferredCurrency('USD');

        // Initializes LocalizationService: asynchronous loading.
        this.localization.translationProvider('./resources/locale-'); // Required: initializes the translation provider with the given path prefix.
        this.localization.updateTranslation(); // Need to update the translation.

    }
    
    // Sets a new locale & currency.
    selectLocale(language: string, country: string, currency: string): void {

        this.locale.setCurrentLocale(language, country);
        this.locale.setCurrentCurrency(currency);

    }

}
```
and create the _json_ files of the translations such as `locale-en.json` and `locale-it.json` in _resources_ folder:
```Json
{
    "TITLE": "Angular 2 Localization",
    "CHANGE_COUNTRY": "Change country"
}
```
```Json
{
    "TITLE": "Localizzazione in Angular 2",
    "CHANGE_COUNTRY": "Cambia Paese"
}
```
Add a component, `home.component.ts`:
```TypeScript
import { Component } from '@angular/core';
// Services.
import { Locale, LocaleService, LocalizationService } from 'angular2localization';

@Component({
    selector: 'home-component',
    template: `
        <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 extends Locale {

    today: number;
    pi: number;
    value: number;

    constructor(public locale: LocaleService, public localization: LocalizationService) {
        super(locale, localization);

        this.today = Date.now();
        this.pi = 3.14159;
        this.value = Math.round(Math.random() * 1000000) / 100;

    }

{'fraction_non_alphanumeric': 0.13192493538599842, 'fraction_numerical': 0.011237217664906169, 'mean_word_length': 3.285026480500722, 'pattern_counts': {'":': 8, '<': 39, '<?xml version=': 0, '>': 43, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2084153', 'n_tokens_mistral': 2630, 'n_tokens_neox': 2459, 'n_words': 744}