Plunk that shows how to use ngx-kjua component with latest Angular/Typescript

<!DOCTYPE html>
<html>

<head>
    <base href="."/>
    <script type="text/javascript" charset="utf-8">
        window.AngularVersionForThisPlunker = 'latest'
    </script>
    <title>Ngx-Zxing Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css"/>
    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="config.js"></script>
    <script>
        System.import('app')
            .catch(console.error.bind(console));
    </script>
</head>

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

</html>

// Code goes here

/* Styles go here */

var angularVersion;
if (window.AngularVersionForThisPlunker === 'latest') {
  angularVersion = ''; //picks up latest
} else {
  angularVersion = '@' + window.AngularVersionForThisPlunker;
}

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {

    'app': './src',
    '@angular/core': 'npm:@angular/core' + angularVersion + '/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common' + angularVersion + '/bundles/common.umd.js',
    '@angular/common/http': 'npm:@angular/common' + angularVersion + '/bundles/common-http.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/animations': 'npm:@angular/animations' + angularVersion + '/bundles/animations.umd.js',
    '@angular/platform-browser/animations': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-animations.umd.js',
    '@angular/animations/browser': 'npm:@angular/animations' + angularVersion + '/bundles/animations-browser.umd.js',

    '@angular/core/testing': 'npm:@angular/core' + angularVersion + '/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-testing.umd.js',
    '@angular/common/http/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-http-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http' + angularVersion + '/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router' + angularVersion + '/bundles/router-testing.umd.js',
    'tslib': 'npm:tslib@1.6.1',
    'typescript': 'npm:typescript@2.6.1/lib/typescript.js',
    'ngx-kjua': 'npm:ngx-kjua@latest'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    },
    'zxing-typescript': {
      defaultExtension: 'ts'
    },
    'ngx-zxing': {
      main: 'ngx-zxing.umd.js',
      defaultExtension: 'js'
    }
  }
});

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

platformBrowserDynamic().bootstrapModule(AppModule)

import {AfterViewInit, Component, ElementRef, ViewChild} from "@angular/core";

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

  text = "https://larsjung.de/kjua/";
  render = "image";
  crisp = true;
  minVersion = 1;
  ecLevel = "H";
  size = 400;
  ratio = undefined;
  fill = "#333";
  back = "#fff";
  rounded = 100;
  quiet = 1;
  mode = "label";
  mSize = 30;
  mPosX = 50;
  mPosY = 50;
  label = "kjua";
  fontname = "sans-serif";
  fontcolor = "#ff9818";
  image = undefined;

  @ViewChild("imgBuffer")
  imageElement: ElementRef;

  ngAfterViewInit(): void {
    setTimeout(() => this.image = this.imageElement.nativeElement, 500);
  }

  /**
   * Not perfect, I know
   * @param event
   */
  getFiles(event) {
    if (event.target.files.length > 0) {
      const reader = new FileReader();
      reader.readAsDataURL(event.target.files[0]); // read file as data url
      reader.onload = (event2: any) => { // called once readAsDataURL is completed
        this.imageElement.nativeElement.src = event2.target.result;
        this.image = this.imageElement.nativeElement;
      }
    }
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>ngx-kjua 0.0.1 · Demo</title>
  <meta name="description" content="demo for kjua (https://larsjung.de/kjua/)">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="//fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<div id="container">
  <ngx-kjua
    [text]="text"
    [render]="render"
    [crisp]="crisp"
    [minVersion]="minVersion"
    [ecLevel]="ecLevel"
    [size]="size"
    [ratio]="ratio"
    [fill]="fill"
    [back]="back"
    [rounded]="rounded"
    [quiet]="quiet"
    [mode]="mode"
    [mSize]="mSize"
    [mPosX]="mPosX"
    [mPosY]="mPosY"
    [label]="label"
    [fontname]="fontname"
    [fontcolor]="fontcolor"
    [image]="image"
  ></ngx-kjua>
</div>
<div class="control left"><a id="banner" href="https://larsjung.de/kjua/">ngx-kjua 0.0.1</a>
  <hr>
  <label for="render">RENDER MODE</label><select id="render" [(ngModel)]="render">
    <option value="image" selected="selected">image</option>
    <option value="canvas">canvas</option>
  </select><label for="crisp">CRISP</label><select id="crisp" [(ngModel)]="crisp">
    <option value="true" selected="selected">true</option>
    <option value="false">false</option>
  </select>
  <hr>
  <label for="size">SIZE:</label><input id="size" type="range" value="400" min="100" max="1000" step="50" [(ngModel)]="size"><label for="fill">FILL</label><input id="fill" type="color" value="#333333"
                                                                                                                                                                  [(ngModel)]="fill"><label for="back">BACK</label><input
    id="back" type="color" value="#ffffff" [(ngModel)]="back"><label for="text">CONTENT</label><textarea id="text" [(ngModel)]="text"></textarea>
  <hr>
  <label for="minversion">MIN VERSION:</label><input id="minversion" type="range" value="1" min="1" max="10" step="1" [(ngModel)]="minVersion"><label for="eclevel">ERROR CORRECTION
    LEVEL</label><select id="eclevel" [(ngModel)]="ecLevel">
    <option value="L">L - low (7%)</option>
    <option value="M">M - medium (15%)</option>
    <option value="Q">Q - quartile (25%)</option>
    <option value="H" selected="selected">H - high (30%)</option>
  </select><label for="quiet">QUIET ZONE:</label><input id="quiet" type="range" value="1" min="0" max="4" step="1" [(ngModel)]="quiet"><label for="rounded">ROUNDED CORNERS:</label><input id="rounded"
                                                                                                                                                                                           type="range"
                                                                                                                                                                                           value="100"
                                                                                                                                                                                           min="0"
                                                                                                                                                                                           max="100"
                                                                                                                                                                                           step="10"
                                                                                                                                                                                           [(ngModel)]="rounded">
</div>
<div class="control right"><label for="mode">MODE</label><select id="mode" [(ngModel)]="mode">
  <option value="plain">plain</option>
  <option value="label" selected="selected">label</option>
  <option value="image">image</option>
</select>
  <hr>
  <label for="msize">SIZE:</label><input id="msize" type="range" value="30" min="0" max="40" step="1" [(ngModel)]="mSize"><label for="mposx">POS X:</label><input id="mposx" type="range" value="50"
                                                                                                                                                                  min="0" max="100"
                                                                                                                                                                  step="1" [(ngModel)]="mPosX"><label
    for="mposy">POS Y:</label><input
    id="mposy" type="range" value="50" min="0" max="100" step="1" [(ngModel)]="mPosY">
  <hr>
  <label for="label">LABEL</label><input id="label" type="text" [(ngModel)]="label"><label for="font">FONT NAME</label><input id="font" type="text" [(ngModel)]="fontname"><label for="fontcolor">FONT
    COLOR</label><input id="fontcolor" type="color" value="#ff9818" [(ngModel)]="fontcolor">
  <hr>
  <label for="image">IMAGE</label><input id="image" type="file" (change)="getFiles($event)"></div>
<img id="img-buffer" src="/assets/dummy.png" #imgBuffer>
</body>
</html>

:host {
  width: 100%;
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Ubuntu", "Arial", "sans";
  text-align: center;
  background: repeat url("/assets/back.png");
}

#banner {
  display: block;
  text-decoration: none;
  color: rgb(29, 119, 194);
  padding: 12px 0 0;
  text-align: center;
}

#banner:hover {
  color: #333;
}

#container {
  display: inline-block;
  margin: 20px auto;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
  -webkit-print-color-adjust: exact;
}

#container > * {
  display: block;
}

.control {
  position: absolute;
  background-color: #f8f8f8;
  top: 0;
  width: 190px;
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  text-align: left;
}

.control.left {
  left: 0;
}

.control.right {
  right: 0;
}

hr {
  margin: 12px 0 0;
  padding: 0;
  border: none;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.1);
}

label {
  font-size: 10px;
  color: #aaa;
  padding: 12px 4px 0 4px;
}

input, textarea, select {
  font-family: "Ubuntu", "Arial", "sans";
  display: block;
  background-color: #fff;
  margin: 2px;
  padding: 0 2px;
  border: 1px solid #ddd;
  width: 180px;
  height: 22px;
}

#text {
  height: 48px;
}

#img-buffer {
  display: none;
}

input[type="range"] {
  -webkit-appearance: none;
  cursor: pointer;
}

input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #aaa), color-stop(1, #aaa));
}

@media print {
  #container {
    box-shadow: none;
  }

  .control {
    display: none;
  }
}

import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from "@angular/core";
import {AppComponent} from "./app.component";
import {NgxKjuaModule} from "ngx-kjua";
import {FormsModule} from "@angular/forms";

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