[Angular 2] Build a select dropdown with *ngFor in Angular 2

We want the start-pipe more flexable to get param, so when using it, we pass a second param as status:

<li *ngFor="#todo of todoService.todos | started : 'started'">

It will be handled as a second param which is an array of the transform() function:

transform(todos, [status]){
return todos.filter(
(todoModel) => {
// Only showing the todo starts with 'e'
return todoModel.status === status;
}
)
}

So No we will only pipe 'started' status. We need a selector to handle the status:

import {Component, EventEmitter, Output} from 'angular2/core';
@Component({
selector: "status-selector",
template: `
<div>
<select #sel (change)="selectedStatus.emit(sel.value)">
<option *ngFor="#status of statuses">
{{status}}
</option>
</select>
</div>
`
})

export class StatusSelector{
@Output() selectedStatus = new EventEmitter();
statuses = ["started", "completed"];

ngOnInit(){
this.selectedStatus.emit(this.statuses[0]);
}
}

And pass the output to the list:

template: `
<todo-input></todo-input>
<status-selector (selectedStatus)="status=$event"></status-selector>
<todo-list [status]="status"></todo-list>
`

Then in the list, we use that selected status:

<li *ngFor="#todo of todoService.todos | started : status">

------------------------------