Angular + Typescript Demo Plunk

<!DOCTYPE html>
<html>

<head>
  <base href="." />
  <title>Angular 7 & wrapped async pipe update</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script>
  <link href="https://unpkg.com/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" />
  <script src="https://unpkg.com/core-js@2.5.7/client/shim.min.js"></script>
  <script src="https://unpkg.com/zone.js@0.8.26?main=browser"></script>
  <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
  <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
  
  <script src="angular7config.js"></script>
  <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
</head>

<body>
  <my-app>
    loading...
  </my-app>
</body>

</html>

/* Styles go here */

//main entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app';

platformBrowserDynamic().bootstrapModule(AppModule);

//our root app component
import { Component, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyComponent } from './mycomponent';
import { CodeReaderComponent } from './codereadercomponent';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
    <div>
      <app-mycomponent></app-mycomponent>
    </div>
  `,
})
export class App {
  name: string;
  constructor() {
    this.name = `Plunker! v${VERSION.full}`;
  }
}

@NgModule({
  imports: [BrowserModule],
  declarations: [App, MyComponent, CodeReaderComponent],
  bootstrap: [App],
})
export class AppModule {}

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

@Component({
  selector:'app-mycomponent',
  template: `
    <div>This is my Component
      <div style="text-align:center">
          <button (click)="changeValue(1)">ENGLISH</button>
          <button (click)="changeValue(2)">FRANCAIS</button>
      </div>
      <dl>
        <dt>
          Current value is:
        </dt>
        <dd>{{_currentValue}}</dd>
        <dt>
          Child value is:
        </dt>
        <dd><app-codereader name='customCode' value={{_currentValue}} [languageIsoCode]='languageIsoCode'></app-codereader></dd>
      </dl>
    </div>`
})
export class MyComponent {
  private _currentValue = 1;
  
  changeValue(newValue:numeric) {
    this._currentValue = newValue;
  }
  
  get languageIsoCode() {
    if (1 == this._currentValue) {
      return 'en';
    } else if (2 == this._currentValue) {
      return 'fr';
    }
    return undefined;
  }
  
}

import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
import { Observable } from 'rxjs';
import { DataService } from './dataservice';


@Component({
  selector: 'app-codereader',
  template: '<span>{{ observableRefData$ | async }}</span>'
})
export class CodeReaderComponent implements OnInit, OnChanges {
  @Input() name: string;
  @Input() value: any;
  @Input() languageIsoCode: string;

  observableRefData$: Observable<string>;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.loadData();
  }

  ngOnChanges(changes: SimpleChanges) {
    if (this.observableRefData$ && changes.languageIsoCode && changes.languageIsoCode.currentValue) {
      this.observableRefData$.subscribe(data => {
        console.log('Lang has changed:', changes.languageIsoCode.currentValue);
        this.languageIsoCode = changes.languageIsoCode.currentValue;
        this.loadData;
      });
    }
  }

  loadData(){
    if (this.value && this.name && this.languageIsoCode) {
      console.log('Reload data', this.value, this.name, this.languageIsoCode);
      switch (this.name) {
        case 'customCode':
          this.observableRefData$ = this.dataService.searchForCategoryCode(this.value, this.languageIsoCode);
          break;
        default:
          //this.observableRefData = this.dataService.searchForXXX(this.name, this.code, this.languageIsoCode);
          break;
      }
    }
  }
}

export const CATEG = {
  "items": [
    {
      "value": "1",
      "description": {
        "en": "Movies",
        "fr": "Films"
      }
    },
    {
      "value": "2",
      "description": {
        "en": "Books",
        "fr": "Livres"
      }
    },
    {
      "value": "3",
      "description": {
        "en": "Video games",
        "fr": "Jeux vidéos"
      }
    }
  ]
};

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';
import { CATEG } from './data';


@Injectable({
  providedIn: 'root',
})
export class DataService {

  private categories$ : Observable<string>;

  constructor() 
    {
      this.categories$ = of(CATEG);
    }

  searchForCategoryCode(categoryCode: number, lang:string): Observable<string> {
    return this.categories$.pipe(map(data => {
      let categoryDefinition = data.items.find(categ => {
        return categ.value == categoryCode;
      });
      console.log('OK! Call to the service has been done!');
      return categoryDefinition.description[lang];
    }));
  }
}

var angularVersion = '@7.0.3';

System.config({
  transpiler: 'ts',
  typescriptOptions: {
    emitDecoratorMetadata: true,
    experimentalDecorators: true
  },
  meta: {
  'typescript': {
		"exports": "ts"
	  }
	},
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  map: {
    app: "./src",
    '@angular/core': 'npm:@angular/core'+angularVersion+'/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common'+angularVersion+'/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler'+angularVersion+'/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser'+angularVersion+'/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic'+angularVersion+'/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http'+angularVersion+'/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router'+angularVersion+'/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms'+angularVersion+'/bundles/forms.umd.js',
    '@angular/upgrade': 'npm:@angular/upgrade'+angularVersion+'/bundles/upgrade.umd.js',
    '@angular/upgrade/static': 'npm:@angular/upgrade'+angularVersion+'/bundles/upgrade-static.umd.js',

    // other libraries
    'rxjs':                      'npm:rxjs@6.2.1',
    'rxjs-compat':               'npm:rxjs-compat@6.2.1',
    'ts':                        'npm:plugin-typescript@8.0.0/lib/plugin.js',
    'typescript':                'npm:typescript@2.9.2/lib/typescript.js',
    '@types/jquery': 'npm:@types/jquery',
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
        main: 'index.js',
        defaultExtension: 'js'
    },
    "rxjs/operators": {
        main: 'index.js',
        defaultExtension: 'js'
    }
  }
});