todoangular.todoitem.component.html

<h1>Todo item {{ todo.id }} </h1>

<p>Edit item {{ todo.title }}.</p>

<p *ngIf="!todo"><em>Loading...</em></p>
<!-- <label>item: </label>  -->
<div class="col-md-3 input-group">
<input [(ngModel)]="todoitem.item" class="form-control " placeholder="new todo item"/>
<span class="input-group-btn">
    <button (click)="Additem()" class="btn  btn-primary " >Add</button>
</span>
</div>
<table class='table' *ngIf="todoItems">
    <thead>
        <tr>
            <th>ID</th>
            <th>Item</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let todoitem of todoItems">
            <td>{{ todoitem.id }}</td>
            <td>{{ todoitem.item }}</td>
        </tr>
    </tbody>
</table>
<button (click)="goback()" class="btn-default btn">back</button>

todoangular.todoitem.component.ts

import { Component, Inject } from "@angular/core";
import { Http } from "@angular/http";
import { ITodo } from "../todo/todo.component";
import { ActivatedRoute } from "@angular/router";
import { Location } from "@angular/common";
import { TodoService } from "../service/Todo.service";

@Component({
    selector: "todoitem",
    templateUrl: "./todoitem.component.html"
})
export class TodoitemComponent {
    public todo: ITodo = { id:0, title:"", TotalItem:0};
    public todoId: number = 0;
    public todoitem: ITodoItem = { item:"", id:0 };
    public todoItems: ITodoItem[] = [];

    constructor(private todoservice: TodoService, private route: ActivatedRoute,private location: Location) {
        const id : any = this.route.snapshot.paramMap.get("id");
        if(id!==null) {
            this.todoId=parseInt(id, undefined);
            this.loadData();
        }
    }
    Additem(): void {
       this.todoservice.Additem(this.todoitem, this.todoId).subscribe(result => {
            this.loadData();
            this.initempty();
       }, error => {
           console.log(error);
       });
    }
    initempty(): void {
        this.todoitem =  {item:"" ,id:0};
    }
    loadData(): void {
       this.todoservice.getTodoById(this.todoId).subscribe(result => {
           this.todo= result.json() as ITodo;
        }, error => {
            console.log(error);
        });
        this.todoservice.getTodoItem(this.todoId).subscribe(result => {
               this.todoItems = result.json() as ITodoItem[];
        },error => {
            console.error(error);
        });
    }

    goback(): void {
        this.location.back();
    }
}

export interface ITodoItem {
    item: string;
    id: number;
}