title: Translations based on specific keys in custom JSON files and business cases with ngx-translate (Angular 7)
body: <p>I have a working implementation of the <a href="https://github.com/ngx-translate/core" rel="nofollow noreferrer">ngx-translate</a> library for Angular, based on several .json files (for example, stored in <strong><em>assets/i18n/en.json</em></strong>).</p>
  
  <p>I want to achieve the following:</p>
  
  <p>There is always a default JSON (for example <strong><em>de.json</em></strong>) and additionally always specific JSON files (for example <strong><em>de_specific.json</em></strong>) that only contain specific translations <strong>using the same keys</strong> as the respective default JSON. If there is e.g. a translation in the default <strong><em>de.json</em></strong> with <strong><em>"Home": "Startseite"</em></strong>, then the translation in the specific <strong><em>de_specific.json</em></strong> is defined as: <strong><em>"Home": "Startseite-Specific"</em></strong>. Only the keys, that should be translated specifically, are transferred to the specific JSON files.</p>
  
  <p>Then it should be additionally checked which business case is currently selected and if there is a specific JSON file for that case and if the properties differ from the properties set in the default JSON file. If so, then this specific JSON file should be taken, otherwise the default one.</p>
  
  <p>I have to implement my own Angular-Pipe or Directive for that, which extends the <a href="https://github.com/ngx-translate/core/blob/master/projects/ngx-translate/core/src/lib/translate.pipe.ts" rel="nofollow noreferrer">built in pipe of the ngx-translate</a> library. However, I have no idea how and where to do this.</p>
  
  <p>Unfortunately, I have not yet written my own angular pipe or directive and therefore I am pleased about detailed help.</p>
  
  <p>In this service the current (wrong) logic is implemented:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { TranslateService } from '@ngx-translate/core';
  import 'moment/locale/de';
  import { UserAuthService } from 'app/auth/user-auth.service';
  
  @Injectable()
  export class ConfigurationService{
  
    languages = {
      en: 'English',
      de: 'German',
      de_specific: 'German',
      es: 'Spanish',
      ja: 'Japanese',
      pt: 'Portuguese'
    };
  
    defaultLanguage = 'en';
  
    constructor(
      private translate: TranslateService,
      private authService: UserAuthService
    ) {}
  
    getAutoConfiguredLanguage() {
      const browserLang = this.translate.getBrowserLang();
      const businessCase = this.authService.activeBusinessCase;
  
      console.log('Browser language: ', browserLang);
      console.log('Current business case: ', businessCase);
      if (this.languages.hasOwnProperty(browserLang)) {
        return businessCase === 'XYZCase' ? browserLang.concat('_specific') :
        browserLang;
      } else {
        return this.defaultLanguage;
      }
    }
  
  }
  </code></pre>
  
  <p>In the AppComponent the initialization is done within the method initLanguage:</p>
  
  <pre><code>  import { Component, HostListener } from '@angular/core';
    import { UserAuthService } from './auth/user-auth.service';
    import { SettingsService } from './auth/settings.service';
    import { TranslateService } from '@ngx-translate/core';
    import { ConfigurationService } from './config/configuration.service';
    import * as moment from 'moment';
    import { Title } from '@angular/platform-browser';
    import { environment } from '../environments/environment';
  
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
    })
    export class AppComponent {
  
      constructor(private translate: TranslateService,
                  private config: ConfigurationService,
                  private settings: SettingsService,
                  private authService: UserAuthService,
                  private titleService: Title) {
        translate.addLangs(Object.keys(config.languages));
        translate.setDefaultLang(config.defaultLanguage);
        this.initLanguage();
        this.initTabName();
      }
  
      @HostListener('window:focus')
      onFocus() {
        this.authService.checkAutoLogout();
      }
  
      initLanguage() {
        console.log("test:-", this.authService.activeBusinessCase);
        const userDefinedLanguage = this.settings.language;
        if (userDefinedLanguage) {
          this.translate.use(userDefinedLanguage);
        } else {
          this.translate.use(this.config.getAutoConfiguredLanguage());
        }
  
        this.translate.onLangChange.subscribe(langEvent =&gt; {
          console.log('set global language ' + langEvent.lang);
          moment.locale(langEvent.lang, this.getCustomMomentLocaleSettings(langEvent.lang));
        });
  
      }
  
      getCustomMomentLocaleSettings(lang) {
        if (lang === 'en') {
          return {
            relativeTime: {
              future: 'in %s',
              past: '%s ago',
              s: '1 second',
              ss: '%d seconds',
              m: '1 minute',
              mm: '%d minutes',
              h: '1 hour',
              hh: '%d hours',
              d: '1 day',
              dd: '%d days',
              M: '1 month',
              MM: '%d months',
              y: '1 year',
              yy: '%d years'
            }
          };
        }
        if (lang === 'de') {
          return {
            relativeTime: {
              future: 'in %s',
              past: 'vor %s',
              s: '1 Sekunde',
              ss: '%d Sekunden',
              m: '1 Minute',
              mm: '%d Minuten',
              h: '1 Stunde',
              hh: '%d Stunden',
              d: '1 Tag',
              dd: '%d Tage',
              M: '1 Monat',
              MM: '%d Monate',
              y: '1 Jahr',
              yy: '%d Jahre'
            }
          };
        }
        return undefined;
      }
  </code></pre>