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">
------------------------------