Angular 2 Observables - Unsubscribing and Disposing

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 Observables - Unsubscribing and Disposing</title>
    <script src="https://unpkg.com/systemjs@0.19.38/dist/system.src.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="system.config.js"></script>
  </head>
  <body>
    <app>Loading...</app>
    
    <script>
      System.import('app');
    </script>
  </body>

</html>

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

@Component({
	selector: 'app',
	template: `
	  <b>Angular 2 Component Using Observables!</b>
	  
	  <h5 style="margin-bottom: 0">VALUES</h5>
	  <pre><code>{{value}}</code></pre>
	  
	  <h5 style="margin-bottom: 0">SUBSCRIBED</h5>
	  <pre><code>{{subscribed}}</code></pre>
	  
	  <h5 style="margin-bottom: 0">STATUS</h5>
	  <pre><code>{{status}}</code></pre>
	  
	  <button style="margin-top: 2rem" (click)="init()">Init</button>
  `
})
export class MyApp {
  
  private data: Observable<Array<string>>;
  private value: string;
  private subscribed: boolean;
  private status: string;

	init() {

		this.data = new Observable(observer => {
			let timeoutId = setTimeout(() => {
				observer.next('You will never see this message');
			}, 2000);
			
			this.status = 'Started';
			
			return onUnsubscribe = () => {
				this.subscribed = false;
				this.status = 'Finished';
				clearTimeout(timeoutId);
			}
		});

		let subscription = this.data.subscribe(
			value => this.value = value,
			error => console.log(error),
			() => this.status = 'Finished';
		);
		this.subscribed = true;
		
		setTimeout(() => {
		  subscription.unsubscribe();
		}, 1000);
	}

}

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
import { MyAppModule } from './app.module'

platformBrowserDynamic().bootstrapModule(MyAppModule)

var angularVersion = '2.0.0';

System.config({
  baseUrl: '/',
  paths: {
    'unpkg:*': 'https://unpkg.com/*'
  }
});

System.config({
  transpiler: 'typescript', 
  typescriptOptions: { emitDecoratorMetadata: true },

  meta: {
    '*': {
      deps: [ 'zone.js', 'reflect-metadata' ]
    }
  }
});

System.config({
  packageConfigPaths: [
    "unpkg:@*/*/package.json"
  ],
  
  map: {
    '@angular/core': 'unpkg:@angular/core@'+angularVersion,
    '@angular/compiler': 'unpkg:@angular/compiler@'+angularVersion,
    '@angular/common': 'unpkg:@angular/common@'+angularVersion,
    '@angular/platform-browser': 'unpkg:@angular/platform-browser@'+angularVersion,
    '@angular/platform-browser-dynamic': 'unpkg:@angular/platform-browser-dynamic@'+angularVersion,
    '@angular/http': 'unpkg:@angular/http@'+angularVersion,
    'rxjs': 'unpkg:rxjs@5.0.0-beta.12',
    'zone.js': 'unpkg:zone.js@0.6.25',
    'reflect-metadata': 'unpkg:reflect-metadata@0.1.3',
    "crypto": "@empty"
  },
  
  packages: {
    'app': {
      defaultExtension: 'ts',
      main: './index.ts'
    }
  }
});

import { BrowserModule }  from '@angular/platform-browser';
import { NgModule } '@angular/core';
import { MyApp } from './app.component'

@NgModule({
  imports: [BrowserModule],
  declarations: [MyApp],
  bootstrap: [MyApp]
})
export class MyAppModule {

}