What is the best way to build a multi-language and multi-directions website with angular?

Question

So I am going to build a fresh new website which has to be accessible to English, French, and Hebrew, note that Hebrew is RTL language.

I decided to build the website with Angular 6. I was thinking about building two templates, one for each direction (LTR and RTL), and fill this templates with content respectively to the language that has been selected.

I was wondering if there is any other sufficient way to build an Angular 6 website which supports multi-directions? I have read about i18n but I don't think it is the right solution as it doesn't provide solutions for directions.

Thanks!

Answer 1

I have made this example using service and pipe, it works perfectly. You need to remove the folowing on your app : I have commented it.

import * as en from './i18n/en.json';
import * as de from './i18n/de.json';
import * as ar from './i18n/ar.json';

const langs = { ar: ar, en: en, de: de };

and active this line to import json files dynamically:

this.languagesObject = require(`./i18n/${value}.json`);

Demo: https://stackblitz.com/edit/angular-translator-using-service-and-pipe

Answer 2

Just in case someone is looking for a library to manage multilanguage in Angular2+. You can use this library that rocks: https://github.com/ngx-translate/core.

Add it to your project with:

npm install @ngx-translate/core --save

Then import it in your AppModule:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {TranslateModule} from '@ngx-translate/core';

@NgModule({
    imports: [
        BrowserModule,
        TranslateModule.forRoot()
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Then, a good practice would be to export it in a SharedModule so you don't have to import it in every module in your app (you would only need to import the SharedModule):

@NgModule({
    exports: [
        CommonModule,
        TranslateModule
    ]
})
export class SharedModule { }

Reference: https://github.com/ngx-translate/core

Hope it helps!