Angular 2 ngClass - apply multiple classes, with class variables

<!DOCTYPE html>
<html>

  <head>
    <title>angular2 playground</title>
    <link href="styles.css" rel="stylesheet" />
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="config.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.min.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/http.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

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

</html>

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  //map tells the System loader where to look for things
  map: {
    app: "./src"
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    }
  }
});

//main entry point
import {enableProdMode} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {App} from './app';
enableProdMode()
bootstrap(App, [])
  .catch(err => console.error(err));

//our root app component
import {Component, Renderer} from 'angular2/core'

@Component({
  selector: 'my-app',
  providers: [],
  templateUrl: 'src/app.html',
  host: {
    '[attr.spinner]': 'isLoading'
  },
  directives: [],
   
})
export class App {
  inputExtraClass: string = 'inputExtraClass';
  applyExtraClass: boolean = true;
}

<div class="container" style="margin-top: 50px">
    <input class='form-control' 
  [ngClass]="[inputExtraClass]" placeholder="Working for single">
    <hr>
    <input [ngClass]="{'form-control': true, 'form-control-sm': applyExtraClass}" placeholder="Working for multiple string">
    <hr>
    <input [ngClass]="{'form-control': true, inputExtraClass: true}" placeholder="Not working for multiple, variable class">
    <hr>
    <input [ngClass]="{'form-control': true, inputExtraClass: applyExtraClass}"  placeholder="Not working for multiple, variable class + boolean">
</div>

.italic {
  font-style: italic;
}

.awesome {
  color: red;
}

.move { 
  position: relative;
  animation:move 1s infinite; 
  animation-duration: 3s;
}
my-app .inputExtraClass{
  background-color:red;
}
@keyframes move {
    0%   {left:0px;}
    50%  {left:200px;}
    100% {left:0px;}
}