Gixng-translating NPM

Internationalizing an Angular App

Using : https://github.com/ngx-translate/core#installation
Demo page: http://guillaumeisabelle.com/r/ngtranslating-mastery/docs/npmjs

Installing

# Does install all that is bellow (ngx-translate +  country-icons)
yarn add gixng-translating --save

what it install:

# We use ngx-tranlate
yarn add @ngx-translate/core --save

# Displaying an Icon of Country
yarn add country-icons --save

Files

Here are the main file to help understand what is done for translating.

File
angular.json	Copy the Culture icon in assets
app.module.ts	uses TranslationService
app.component.ts	Sets up language
app.component.html	Choose language

ngapp/Root

angular.json

"assets": [
  "src/favicon.ico",
     {
       "glob": "*.svg",
       "input": "./node_modules/country-icons/Markup/blocks/lng/i/",
       "output": "assets/i18n.icon/"
     },
     "src/assets"
   ],

app.module.ts

import {HttpClient, HttpClientModule} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';

import {FlexLayoutModule} from '@angular/flex-layout';

// AoT requires an exported function for factories
export function HttpLoaderFactory(httpClient: HttpClient) {
  //----------------------------------------------
  //@STCissue Should take care of the Assets language relative path
# [ngx-translate]()
## ngx-translate VSCode Extension ???



```bash
npm install @ngx-translate/core --save
yarn add @ngx-translate/core --save

Displaying an Icon of Country

yarn add country-icons --save

angular.json

"assets": [
  "src/favicon.ico",
     {
       "glob": "*.svg",
       "input": "./node_modules/country-icons/Markup/blocks/lng/i/",
       "output": "assets/i18n.icon/"
     },
     "src/assets"
   ],

app.module.ts

import {HttpClient, HttpClientModule} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';

import {FlexLayoutModule} from '@angular/flex-layout';

// AoT requires an exported function for factories
export function HttpLoaderFactory(httpClient: HttpClient) {
  //----------------------------------------------
  //@STCissue Should take care of the Assets language relative path
  return new TranslateHttpLoader(httpClient,"./assets/i18n/",".json");


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,

    //@a Make the Pipe Translate to load local from assets
    HttpClientModule,
    FlexLayoutModule,

    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],//...
}

app.component.ts

import { Component } from '@angular/core';


//@STCGoal Show a Site in French
import { TranslateService } from '@ngx-translate/core';


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

  refreshIconPath() {
    
    this.iconpath = this.getLanguageIconPath(this.browserLang);
  }

  langSupported = ['en', 'fr', 'es'];

  title = 'ngtranslating-mastery';
  browserLang = '';
  bypassLang = true;

  iconpathbase = 'assets/i18n.icon/';
  iconpath = '';

  /**
   *
   */
  constructor(public translate: TranslateService) {
    //  console.log(this.relpath);
    //------------------------------------------------------------
    //@STCGoal Show a Site in French
    translate.addLangs(this.langSupported); //@o Adding two language
    translate.setDefaultLang('en'); //@o Default French

    if (!this.bypassLang) {
      this.browserLang = translate.getBrowserLang();

      translate.use(this.browserLang.match(/en|fr/) ? this.browserLang : 'fr'); //@o If the browser is not FR or EN use English as default
    }
    else {
      this.browserLang = "en"; //bypass to FR for experimenting as my browser is English
    }

    this.refreshIconPath();

    //--------------------------


  }

  /**
   * Get image path for a language
   * @param l
   */
  getLanguageIconPath(l: string): string {
    return this.iconpathbase + l + ".svg";
  }

  /**
   * Set a Language for the UI
   * @param l
   */
  setLanguage(l: string) {
    this.browserLang = l;
    this.translate.use(this.browserLang);
    this.refreshIconPath();
  }
}

app.component.html

>

<div fxLayout="row" >
  
  <span *ngFor="let l of langSupported"   >
    <button class="lang-button" (click)="setLanguage(l)" >{{l|uppercase }} <img [src]="getLanguageIconPath(l)"  class="lang-icon"></button>
  </span>
</div>
  <hr>


<span>{{'HOME.HELLO' | translate}}</span>
<h3>Current browser lang: {{browserLang}} <img [src]="getLanguageIconPath(browserLang)"  class="lang-icon"></h3>
<div style="text-align:center">
  <h1>
     <span id="title">{{'HOME.TITLE' | translate}} {{title}}</span></h1>

assets/i18n/en.json

{
  "LANG": {
    "NAME": "English"
   },
   "HOME": {
     "HELLO": "Hello here that is a try of the ngx-translate - This is obviously the English string ",
      "TITLE": "Welcome to "
   },
   "HELPSTART":"Here are some links to help you start:"
}

Resources

return new TranslateHttpLoader(httpClient,"./assets/i18n/",".json");

@NgModule({ declarations: AppComponent , imports: [ BrowserModule, AppRoutingModule,

//@a Make the Pipe Translate to load local from assets
HttpClientModule,
FlexLayoutModule,

TranslateModule.forRoot({
  loader: {
    provide: TranslateLoader,
    useFactory: HttpLoaderFactory,
    deps: [HttpClient]
  }
})

],//... }

### [app.component.ts]()
[app.component.ts]:https://github.com/GuillaumeIsabelleX/ngtranslating-mastery/blob/master/ngapp/src/app/app.component.ts


```typescript
import { Component } from '@angular/core';


//@STCGoal Show a Site in French
import { TranslateService } from '@ngx-translate/core';


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

  refreshIconPath() {

    this.iconpath = this.getLanguageIconPath(this.browserLang);
  }

  langSupported = ['en', 'fr', 'es'];

  title = 'ngtranslating-mastery';
  browserLang = '';
  bypassLang = true;

  iconpathbase = 'assets/i18n.icon/';
  iconpath = '';

  /**
   *
   */
  constructor(public translate: TranslateService) {
  //  console.log(this.relpath);
    //------------------------------------------------------------
    //@STCGoal Show a Site in French
    translate.addLangs(this.langSupported); //@o Adding two language
    translate.setDefaultLang('en'); //@o Default French

    if (!this.bypassLang) {
      this.browserLang = translate.getBrowserLang();

      translate.use(this.browserLang.match(/en|fr/) ? this.browserLang : 'fr'); //@o If the browser is not FR or EN use English as default
    }
    else {
      this.browserLang = "en"; //bypass to FR for experimenting as my browser is English
    }

    this.refreshIconPath();

    //--------------------------


  }

  /**
   * Get image path for a language
   * @param l
   */
  getLanguageIconPath(l: string): string {
    return this.iconpathbase + l + ".svg";
  }

  /**
   * Set a Language for the UI
   * @param l
   */
  setLanguage(l: string) {
    this.browserLang = l;
    this.translate.use(this.browserLang);
    this.refreshIconPath();
  }
}

app.component.html

>

<div fxLayout="row" >
  
  <span *ngFor="let l of langSupported"   >
    <button class="lang-button" (click)="setLanguage(l)" >{{l|uppercase }} <img [src]="getLanguageIconPath(l)"  class="lang-icon"></button>
  </span>
</div>
  <hr>


<span>{{'HOME.HELLO' | translate}}</span>
<h3>Current browser lang: {{browserLang}} <img [src]="getLanguageIconPath(browserLang)"  class="lang-icon"></h3>
<div style="text-align:center">
  <h1>
    <span id="title">{{'HOME.TITLE' | translate}} {{title}}</span></h1>

assets/i18n/en.json

{
   "LANG": {
     "NAME": "English",
      "ICON": "en.svg"
   },
   "HOME": {
     "HELLO": "Hello here that is a try of the ngx-translate - This is obviously the English string ",
      "TITLE": "Welcome to "
   },
   "HELPSTART":"Here are some links to help you start:"
}