NgxMultilingual

This is a package to make it easier to create a multilingual project.

Install

To install this, use:

npm install --save ngx-multilingual

Use

To use in your project import it in your module like that:

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


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


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MultilingualModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

and use in your component:

<h3>{{ multilingual.get('home', 'pt') }}</h3>
<p>{{ multilingual.get('hello', 'en') }}</p>
<p>{{ multilingual.get('country', 'es') }}</p>

and

import { Component } from '@angular/core';
import { MultilingualService } from './multilingual/multilingual.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(
    public multilingual: MultilingualService
  ) {
    multilingual.path('assets/multilingual', "multi");
  }

}

And create the json file:

[
    {
        "lang": "en",
        "home": "Multilingual Home",
        "hello": "Hello World",
        "country": "United States"
    },
    {
        "lang": "pt",
        "home": "Página principal de Multilingual",
        "hello": "Olá mundo",
        "country": "Brasil"
    },
    {
        "lang": "es",
        "home": "Página principal de Multilingüe",
        "hello": "Hola mundo",
        "country": "España"
    }
]

Another ways

If you want to use diferents json files you can create a file like: en.json:

{
    "home": "Multilingual Home",
    "hello": "Hello World",
    "country": "United States"
}

and another like pt.json:

{
    "home": "Página principal de Multilingual",
    "hello": "Olá mundo",
    "country": "Brasil"
}

And you can set the language or not, if you don't set the language, the language of the navigator will be setted. Then you can change it:

multilingual.path('assets/multilingual', "multi");

to:

multilingual.path('assets/multilingual', "en");

or just it, to use the navigator language or the html language.

multilingual.path('assets/multilingual');