Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<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>
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment