import {Component, OnInit} from 'angular2/core';
import {Task} from './task';
import {TaskService} from "./task.service";
import {TaskListComponent} from './task-list.component';

@Component({
    selector:'tasks',
    templateUrl: './app/task.component.html',
    directives: [TaskListComponent],
    providers: [TaskService]
})

export class TaskComponent implements OnInit {
    task = new Task();
    public tasks: Task[];

    constructor(public _taskService: TaskService) { }

    getTasks() {
        this._taskService.getWsTask().subscribe(tasks => this.tasks = tasks);
    }

    ngOnInit() {
        this.getTasks();
    }

    onSubmit()
    {
        this.tasks = [...this.tasks, this.task]; 
        this.task = new Task();
    }
}

import {Task} from './task';
import {Injectable} from "angular2/core";
import {Http} from 'angular2/http';
import 'rxjs/add/operator/map';

@Injectable()
export class TaskService {
    tasks: Task[];

    constructor(public http: Http) {
        console.log('Task Service created.');
    }

    public getWsTask(){
        return this.http.get('http://localhost:3000/tasks')
            .map((responseData) => responseData.json())
            .map((tasks: Array<any>) => {
                let result: Array<Task> = [];
                if (tasks) {
                    tasks.forEach((task) => {
                        result.push(
                            new Task(task.name, task.status));
                    });
                }
                return result;
            });
            ;
    }

}

import {Component, Input, ChangeDetectionStrategy} from "angular2/core";
import {TaskService} from "./task.service";
import {DonePipe} from "./done-pipe";
import {LengthPipe} from "./count-pipe";

@Component({
    selector: 'task-list',
    pipes: [DonePipe,LengthPipe],
    templateUrl: './app/task-list.component.html',
    providers: [TaskService],
    changeDetection: ChangeDetectionStrategy.OnPush
})

export class TaskListComponent {
    @Input() tasks;
    constructor(public _taskService: TaskService){ }
}

<h2>Tasks List</h2>
<ul class="list-group">
    <li  class="list-group-item" *ngFor="#task of tasks">
        <button  class="btn btn-default btn-xs pull-right" (click)="task.setStatus('done')" *ngIf="(task.status == 'todo')">Done</button>
        {{ task.name }}
    </li>
</ul>
<div class="alert alert-info" role="alert" *ngIf="(tasks)">
    {{ tasks | done: false | length }} tasks to do
</div>
<div class="alert alert-success" role="alert" *ngIf="(!tasks)">
    Nothing to do !
</div>
<h2>Done Tasks</h2>
<ul class="list-group">
    <li  class="list-group-item" *ngFor="#task of task">
        {{ task.name }}
    </li>
</ul>

<h2>Add a task</h2>
<form (ngSubmit)="onSubmit()" #taskForm="ngForm">
    <div class="form-group">
        <label for="name">Task</label>
        <input type="text" class="form-control" required
               [(ngModel)]="task.name"
               ngControl="name" #name="ngForm">
    </div>
    <button type="submit" class="btn btn-default"
            >Submit</button>
</form>
<task-list [tasks]="tasks">Chargement des taches ... </task-list>