todoangular.todo.component.html

<h1>Todo </h1>

<p>This component is to run todo app.</p>

<p *ngIf="!todos"><em>Loading...</em></p>
<div class="col-md-3 input-group">
    <!-- <label>New todo
    </label> -->
    <input [(ngModel)]="todo.title" class="form-control"  placeholder="New todo title.">
    <span class="input-group-btn">
    <button (click)="newtodo()" class="btn btn-primary">Submit</button>
</span>
</div>
<table class='table' *ngIf="todos">
    <thead>
        <tr>
            <th>Title</th>
            <th># Items</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let todo of todos">
            <td><a routerLink="/todo/{{todo.id}}"> {{ todo.title }}</a></td>
            <td>{{ todo.totalItem }}</td>
        </tr>
    </tbody>
</table>

todoangular.todo.component.ts

import { Component, Inject } from "@angular/core";
import { Http } from "@angular/http";
import { ITodoItem } from "../todoitem/todoitem.component";
import { TodoService } from "../service/Todo.service";

@Component({
    selector: "todo",
    templateUrl: "./todo.component.html"
})
export class TodoComponent {
    public todos: ITodo[] = [];
    public todo: ITodo = {title:"" ,id:0, TotalItem:0 };

    constructor(private Todoservice: TodoService) {
        this.getTodo();
    }
    initempty(): void {
        this.todo =  {title:"" ,id:0, TotalItem:0 };
    }
    getTodo(): void {
        this.Todoservice.getTodo().subscribe(result => { this.todos = result.json() as ITodo[]; }, error => {
            console.log(error);
        });
    }
    newtodo(): void {
        if(this.todo.title !== "") {
            const data: ITodo = this.Todoservice.addtodo(this.todo);
            this.getTodo();
            console.log(data);
            this.initempty();
        }
    }
}

export interface ITodo {
    title: string;
    id: number;
    TotalItem: number;
}