alvipeo/config.js

## config.js
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',
      filelist: './filelest.ts',
      fileitem: './fileitem.ts',
      processingService: './processingService',
      typingText: './typingText.ts',
      defaultExtension: 'ts'
    }
  }
});

## index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>playground</title>
  <link rel="stylesheet" href="styles.css">
    <script src="https://code.angularjs.org/2.0.0-beta.12/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.12/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.12/angular2.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.12/http.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.12/router.dev.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <app></app>
  </body>

</html>

## src\fileitem.ts
export class IlgFileItem {
  private _progress: number = 0;

  constructor (private _id: number) {}

  get progress(): number {
    return this._progress;
  }

  updateProgress(): boolean {
    if (this._progress < 100) {
      this._progress += 5;
      return true;
    }
    return false;
  }
}

## src\filelist.ts
import {Input, Component, ChangeDetectionStrategy, ChangeDetectorRef, AfterViewInit, OnChanges, SimpleChange, ViewChild} from "angular2/core";
import {Observable} from 'rxjs/Rx';
import {IlgFlyingText} from './typingText';
import {IlgFileItem} from './fileitem';
import {ProcessingService} from './processingService';

@Component({
  selector: "ilg-filelist",
  template: `<div>
    <ul>
    <li class="progr" *ngFor="#file of items" [style.width.%]="file.progress"><span>{{file.progress}}</span></li>
    </ul>
            </div>`,
  changeDetection: ChangeDetectionStrategy.OnPush // COMMENT OUT THIS LINE TO MAKE EVERYTHING WORK
})
export class IlgFilelist {
  @Input() numberOfItems: number;

  filesArray$: Observable<Array<IlgFileItem>>;

  private _items: Array<IlgFileItem>;
  get items(): Array<IlgFileItem> {
    return this._items;
  }

  constructor() {
  }

  run() {
    this._processingService = new ProcessingService(this.numberOfItems);

    this._processingService.process()
      .subscribe((array: Array<IlgFileItem) => {
        this._items = array;
        console.log(this._items !== array);
      },
      null,
      () => console.log("COMPLETE");
  }
}

## src\main.ts
import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {Observable} from 'rxjs/Rx';
import {IlgFilelist} from "./filelist";

@Component({
    selector: 'app',
    template: `<div>
      <hr/>
      <p>If you start process just like this you won't see anything happening in the view (but will see it in the console). But if you comment out ChangeDetectionProperty.OnPush in 'filelist.ts' the component will be updating its view.</p>

      <a (click)="$event.preventDefault(); list.run();" href="#">Start process</a>
      <hr/>
      <ilg-filelist #list [numberOfItems]="5"></ilg-filelist>
      <hr/>
    </div>`,
    directives: [IlgFilelist]
})
export class App {
  constructor() {}
}
bootstrap(App, []);

## src\processingService.ts
import {Observable} from 'rxjs/Rx';
import {IlgFileItem} from './fileitem';

export class ProcessingService {
  constructor(private _amount: number) {

  }

  process(): Observable<Array<IlgFileItem>> {
    const arr = Array<IlgFileItem>();

    for (let i=0; i<this._amount; i++) {
      arr[i] = new IlgFileItem(i));
    }

    const ob$ =
    Observable.interval(300)
    .map(() => return arr)
    .map(arr => {
        do {
          let rndIdx = this.getRandomIndex();
        } while (!arr[rndIdx].updateProgress());

        const newArr = new Array<IlgFileItem>(...arr);
        newArr.forEach((element) => console.log(element));

        return newArr;
      })
      .takeWhile(arr => !arr.every((item: IlgFileItem) => item.progress == 100));

    return ob$;
  }

  private getRandomIndex(): number {
    const min = 0;
    const max = this._amount;
    return Math.floor(Math.random() * (max - min)) + min;
  }
}

## src\typingText.ts
import {Input, Component, ChangeDetectionStrategy, ChangeDetectorRef, AfterViewInit, OnChanges, SimpleChange} from "angular2/core";
import {Observable} from 'rxjs/Rx';

@Component({
    selector: "ilg-flying-text",
    template: "{{ showError$ | async }}",
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class IlgFlyingText implements AfterViewInit, OnChanges {
    @Input() text: string;

    showError$: Observable<string>;

    ngAfterViewInit() {
        this.initObservable();
    }

    ngOnChanges(changes: { [propName: string]: SimpleChange }) {
        this.initObservable();
    }

    private initObservable() {
        if (!!this.text) {
            console.log(this.text);
            this.showError$ = this.createErrorObservable(this.text);
        } else {
            this.showError$ = Observable.of(null);
        }
    }

    private createErrorObservable(errText: string): Observable<string> {
        //console.log(err);
        let o1$ = Observable.of(errText);
        let o2$ = Observable.interval(25);
        let o$ = o1$
            .switch()
            .zip(o2$)
            .map(tuple => tuple[0])
            .scan((acc, val) => acc += val[0]);
        //.do(val => console.log(val));
        return o$;
    }
}

## styles.css
/* todo: add styles */
.progr {
  height: 2rem;
  background-color: blue;
  color: white;
  text-align: center;
  display: table;
}

.progr span {
  display: table-cell;
  vertical-align: middle;
  padding: 0.3rem;
}
	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',
	filelist: './filelest.ts',
	fileitem: './fileitem.ts',
	processingService: './processingService',
	typingText: './typingText.ts',
	defaultExtension: 'ts'
	}
	}
	});
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>playground</title>
	<link rel="stylesheet" href="styles.css">
	<script src="https://code.angularjs.org/2.0.0-beta.12/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.12/Rx.js"></script>
	<script src="https://code.angularjs.org/2.0.0-beta.12/angular2.dev.js"></script>
	<script src="https://code.angularjs.org/2.0.0-beta.12/http.dev.js"></script>
	<script src="https://code.angularjs.org/2.0.0-beta.12/router.dev.js"></script>
	<script>
	System.import('app')
	.catch(console.error.bind(console));
	</script>
	</head>

	<body>
	<app></app>
	</body>

	</html>
	export class IlgFileItem {
	private _progress: number = 0;

	constructor (private _id: number) {}

	get progress(): number {
	return this._progress;
	}

	updateProgress(): boolean {
	if (this._progress < 100) {
	this._progress += 5;
	return true;
	}
	return false;
	}
	}
	import {Input, Component, ChangeDetectionStrategy, ChangeDetectorRef, AfterViewInit, OnChanges, SimpleChange, ViewChild} from "angular2/core";
	import {Observable} from 'rxjs/Rx';
	import {IlgFlyingText} from './typingText';
	import {IlgFileItem} from './fileitem';
	import {ProcessingService} from './processingService';

	@Component({
	selector: "ilg-filelist",
	template: `<div>
	<ul>
	<li class="progr" *ngFor="#file of items" [style.width.%]="file.progress"><span>{{file.progress}}</span></li>
	</ul>
	</div>`,
	changeDetection: ChangeDetectionStrategy.OnPush // COMMENT OUT THIS LINE TO MAKE EVERYTHING WORK
	})
	export class IlgFilelist {
	@Input() numberOfItems: number;

	filesArray$: Observable<Array<IlgFileItem>>;

	private _items: Array<IlgFileItem>;
	get items(): Array<IlgFileItem> {
	return this._items;
	}

	constructor() {
	}

	run() {
	this._processingService = new ProcessingService(this.numberOfItems);

	this._processingService.process()
	.subscribe((array: Array<IlgFileItem) => {
	this._items = array;
	console.log(this._items !== array);
	},
	null,
	() => console.log("COMPLETE");
	}
	}
	import {Component} from 'angular2/core';
	import {bootstrap} from 'angular2/platform/browser';
	import {Observable} from 'rxjs/Rx';
	import {IlgFilelist} from "./filelist";

	@Component({
	selector: 'app',
	template: `<div>
	<hr/>
	<p>If you start process just like this you won't see anything happening in the view (but will see it in the console). But if you comment out ChangeDetectionProperty.OnPush in 'filelist.ts' the component will be updating its view.</p>

	<a (click)="$event.preventDefault(); list.run();" href="#">Start process</a>
	<hr/>
	<ilg-filelist #list [numberOfItems]="5"></ilg-filelist>
	<hr/>
	</div>`,
	directives: [IlgFilelist]
	})
	export class App {
	constructor() {}
	}
	bootstrap(App, []);
	import {Observable} from 'rxjs/Rx';
	import {IlgFileItem} from './fileitem';

	export class ProcessingService {
	constructor(private _amount: number) {

	}

	process(): Observable<Array<IlgFileItem>> {
	const arr = Array<IlgFileItem>();

	for (let i=0; i<this._amount; i++) {
	arr[i] = new IlgFileItem(i));
	}

	const ob$ =
	Observable.interval(300)
	.map(() => return arr)
	.map(arr => {
	do {
	let rndIdx = this.getRandomIndex();
	} while (!arr[rndIdx].updateProgress());

	const newArr = new Array<IlgFileItem>(...arr);
	newArr.forEach((element) => console.log(element));

	return newArr;
	})
	.takeWhile(arr => !arr.every((item: IlgFileItem) => item.progress == 100));

	return ob$;
	}

	private getRandomIndex(): number {
	const min = 0;
	const max = this._amount;
	return Math.floor(Math.random() * (max - min)) + min;
	}
	}
	/* todo: add styles */
	.progr {
	height: 2rem;
	background-color: blue;
	color: white;
	text-align: center;
	display: table;
	}

	.progr span {
	display: table-cell;
	vertical-align: middle;
	padding: 0.3rem;
	}