Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add TRANSLATIONS and dynamic locale loading info to README. #7

Merged
merged 1 commit into from
Jan 4, 2018
Merged

Add TRANSLATIONS and dynamic locale loading info to README. #7

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 42 additions & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,35 +36,65 @@ I18nDef: {
}
```

Prepare your application to use i18n, [as described on the official documentation](https://angular.io/guide/i18n#merge-the-completed-translation-file-into-the-app), and then provide the service `I18n` in your module or component:
Prepare your application to use i18n, [as described on the official documentation](https://angular.io/guide/i18n#merge-the-completed-translation-file-into-the-app), and then provide the `TRANSLATIONS` file and `I18n` service in your module or component:

```ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {
NgModule,
TRANSLATIONS
} from '@angular/core';

import { AppComponent } from './app.component';

// Import the service
import { I18n } from '@ngx-translate/i18n-polyfill';

declare const require; // Use the require method provided by webpack
const translations = require(`raw-loader!../locale/messages.fr.xlf`);

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [I18n],
providers: [
{provide: TRANSLATIONS, useValue: translations},
I18n
],
bootstrap: [AppComponent]
})
export class AppModule { }
```

Once the `I18n` service is imported & provided, you can use it in your Angular application:
To dynamically load the translations file based on locale you can use a factory provider.


Replace

```
{provide: TRANSLATIONS, useValue: translations}
```
with:

```typescript
{
provide: TRANSLATIONS,
useFactory: (locale) => {
locale = locale || 'en'; // default to english if no locale provided
return require(`raw-loader!../locale/messages.${locale}.xlf`);
},
deps: [LOCALE_ID]
}
```

Once the `I18n` service and `TRANSLATIONS` are imported & provided, you can use the service in your Angular application:

```typescript
import {Component} from "@angular/core";
import {I18n} from "@ngx-translate/i18n-polyfill";
import { Component } from "@angular/core";
import { I18n } from "@ngx-translate/i18n-polyfill";

@Component({
selector: "app-root",
Expand All @@ -77,6 +107,12 @@ export class AppComponent {
}
```

You can then test out your changes and serve your application like

```
ng serve --aot --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr
```

## Content supported
You can use strings, interpolations and [ICU expressions](https://angular.io/guide/i18n#select-among-alternative-text-messages) exactly like in [template translations](https://angular.io/guide/i18n#template-translations).
Don't use elements, it makes no sense and you should use a template translation for that instead.
Expand Down