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

 

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