app.ts

import {Component, EventEmitter} from "angular2/core";
import {Http} from 'angular2/http';
import {Subject} from "rxjs/Rx";

@Component({
	selector: 'app',
	template: `
		<div>{{(selectedPerson | async)?.name}}</div>
		<hr/>
		<div *ngFor="#person of data | async">
			<div (mouseover)="select.emit(person.id)">{{person.name}}</div>
		</div>		
	`
})
export class App {
	select = new EventEmitter();
	data = new Subject();
	selectedPerson;
	
	constructor(public http:Http){
		http.get('data.json')
			.map(res => res.json())
			.subscribe(this.data);
				
		this.selectedPerson = this.select			
			.combineLatest(this.data, (id, contacts)=> contacts[id])
		
		//whenever the data loads, "emit" a select event
		this.data
			.subscribe(()=> this.select.emit(0))
													
	}
}