uv-translate

make your site available in different language for your angular 7+ app

Usage no npm install needed!

<script type="module">
  import uvTranslate from 'https://cdn.skypack.dev/uv-translate';
</script>

README

switch between language

make your site available in different language for your angular 7+ app

npm i uv-translate

usage

first import langService to your app.module.translate

import { HttpClientModule } from "@angular/common/http";
import { LangService } from "uv-translate";
@NgModule({
    declarations: [AppComponent],
    imports: [
      ...your modules,
      HttpClientModule
    ],
    bootstrap: [AppComponent],
    providers: [LangService],
    entryComponents: []
})

in your app.component.ts first set your default language

constructor(private langService: LangService) {}
ngOnInit() {
    this.langService.setDefaultLang("assets/i18n/en.json").then(() => {
        // load your spinner, if any;
        // this.loadSpinner = false;
    });
}

import TranslatePipeModule to a module where you want to translate

import { TranslatePipeModule } from "uv-translate";
@NgModule({
    declarations: [... your declarations],
    imports: [
      ... your modules,
      TranslatePipeModule
    ]
})

now you can translate anywhere in your component template

<span>{{'title' | translate: 'app'}}</span>

more about 'title' and 'app' meaning, scroll to language json file formate;

change language and don't forget to reload your browser

setLang(value) {
    const lang = `assets/i18n/${value}.json`;
    this.langService.changeLang(lang).then(() => {
        // load your spinner, if any;
        // this.loadSpinner = false;
        location.reload();
    });
}

language json file should be in 'assets/i18n/en.json' folder

{
    "app": {
        "title": "Translator"
    },
    "expense": {
        "title": "Expense",
        "mr": "Mr.",
        "mrs": "Mrs.",
    },
    "receive": {
        "title": "Income",
        "mr": "Mr.",
        "mrs": "Mrs.",
    }
}

other language 'assets/i18n/fr.json' folder

{
    "app": {
        "title": "Traducteur"
    },
    "expense": {
        "title": "Frais",
        "mr": "Mr.",
        "mrs": "Mrs.",
    },
    "receive": {
        "title": "le revenu",
        "mr": "Mr.",
        "mrs": "Mrs.",
    }
}