undefined

import {Component} from 'angular2/core';
import {Observable} from 'rxjs/Observable';

@Component({
	selector: 'app-root',
	template: `
	  <b>Angular 2 Component Using Observables!</b>
	 
	  <h6 style="margin-bottom: 0">VALUES (its an observable, you can unwrap with async pipe or push it into an array after subscribing to it):</h6>
	  <div >- {{ values }}</div>

	  
	  <button style="margin-top: 2rem;" (click)="get()">get</button>
	`
})
export class AppComponent {
  
  private values;

    get(): Observable<string[]> {
        // return Observable.of(this.getData());
         this.values = new Observable(this.getData());
    }

    constructor() { }

    getData(): string[] {
      console.log('Hello')
        return [
            'Beverage',
            'Food',
            'Beverage & Food',
            'Promo Pack'
        ];
    }

}

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);

<!DOCTYPE html>
<html>

  <head>
    <title>Angular 2 QuickStart</title>

    <!-- 1. Load libraries -->
    <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="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'app': {defaultExtension: 'ts'}} 
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <app-root>Loading...</app-root>
  </body>

</html>