import { Component , OnInit } from '@angular/core' ; import { TodoService } from './todo.service' ; import { Todo } from './todo' ; import { NgForm } from '@angular/forms' ; @ Component ( { selector : 'todo-list' , templateUrl : './todo-list.component.html' } ) export class TodoListComponent implements OnInit { todos : Todo [ ] = [ ] ; newTodo : Todo = new Todo ( ) ; editing : boolean = false ; editingTodo : Todo = new Todo ( ) ; constructor ( private todoService ) { } ngOnInit ( ) { this . getTodos ( ) ; } getTodos ( ) { this . todoService . getTodos ( ) . subscribe ( todos => this . todos = todos ) ; } createTodo ( todoForm ) { this . todoService . createTodo ( this . newTodo ) . subscribe ( createTodo => { todoForm . reset ( ) ; this . newTodo = new Todo ( ) ; this . todos . unshift ( createTodo ) ; } ) ; } deleteTodo ( id ) { this . todoService . deleteTodo ( id ) . subscribe ( ( ) => { this . todos = this . todos . filter ( todo => todo . id != id ) ; } ) ; } updateTodo ( todoData ) { console . log ( todoData ) ; this . todoService . updateTodo ( todoData ) . subscribe ( updatedTodo => { let existingTodo = this . todos . find ( todo => todo . id === updatedTodo . id ) ; Object . assign ( existingTodo , updatedTodo ) ; this . clearEditing ( ) ; } ) ; } toggleCompleted ( todoData ) { todoData . completed = ! todoData . completed ; this . todoService . updateTodo ( todoData ) . subscribe ( updatedTodo => { let existingTodo = this . todos . find ( todo => todo . id === updatedTodo . id ) ; Object . assign ( existingTodo , updatedTodo ) ; } ) ; } editTodo ( todoData ) { this . editing = true ; Object . assign ( this . editingTodo , todoData ) ; } clearEditing ( ) { this . editingTodo = new Todo ( ) ; this . editing = false ; } }