added empty list template

db.json

@@ -1,13 +1,13 @@
 {
   "tasks": [
     {
-      "title": "Study Angular",
+      "title": "Study Angular 6",
       "completed": false,
       "editing": false,
       "id": 1
     },
     {
-      "title": "Workout ",
+      "title": "Workout",
       "completed": false,
       "editing": false,
       "id": 2

src/app/Todo-List-App/components/todo-empty/todo-empty.component.css

@@ -0,0 +1,12 @@
+h3{
+    font-size: 2em;
+}
+
+.img-div, h3{
+    display: flex;
+    justify-content: center;
+}
+
+.img-div img{
+    max-width: 10em;
+}

src/app/Todo-List-App/components/todo-empty/todo-empty.component.html

@@ -0,0 +1,6 @@
+<div>
+  <h3>Your list is Empty 👻</h3>
+  <div class="img-div">
+    <img src="../../../../assets/to-do.png" alt="to-do">
+  </div>
+</div>

src/app/Todo-List-App/components/todo-empty/todo-empty.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TodoEmptyComponent } from './todo-empty.component';
+
+describe('TodoEmptyComponent', () => {
+  let component: TodoEmptyComponent;
+  let fixture: ComponentFixture<TodoEmptyComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TodoEmptyComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TodoEmptyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/Todo-List-App/components/todo-empty/todo-empty.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'todo-empty',
+  templateUrl: './todo-empty.component.html',
+  styleUrls: ['./todo-empty.component.css']
+})
+export class TodoEmptyComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/Todo-List-App/containers/TodoList/todo-list.component.html

@@ -9,6 +9,9 @@
             <input type="text" class="form-control addInput" placeholder="Things you want to do today?" [(ngModel)]="taskTitle" (keyup.enter) = "addTask()">
         </div>
         <div class="content">
+            <div *ngIf="remaining() ===0">
+                <todo-empty></todo-empty>
+            </div>
             <ul>
                 <li *ngFor= "let task of tasks" @fade>
                     <input type="checkbox" [(ngModel)]="task.completed">
@@ -23,12 +26,12 @@
                     <div *ngIf="!task.editing; else doneBtn" ><button class="btn btn-success listBtn"(click)="toggleEdit(task)" ><i class="fa fa-edit"> Edit</i></button></div>    
                     <ng-template #doneBtn>
                     <div>
-                        <button class="btn btn-success listBtn"(click)="editTask(task)" ><i class="fa fa-edit">   Done</i></button>
+                        <button class="btn btn-success listBtn"(click)="editTask(task); toggleEdit(task)" ><i class="fa fa-edit">Done</i></button>
                     </div>
                     </ng-template>
                     
                     <div>
-                        <button class="btn btn-danger listBtn" (click)="deleteTask(task) && doneEditing(task)"><i   class="fa fa-trash"> Del</i></button>
+                        <button class="btn btn-danger listBtn" (click)="deleteTask(task)"><i   class="fa fa-trash"> Del</i></button>
                     </div>
                 </li>
             </ul>

src/app/Todo-List-App/containers/TodoList/todo-list.component.ts

@@ -70,25 +70,16 @@ export class TodoList{
         // this.taskId++;
     }
 
-    //delete function
-    deleteTask(tasks: Tasks){
-        this.tasks = this.tasks.filter(task => task.id !== tasks.id);
-
-        this.todoService.deleteTask(tasks)
-            .subscribe(data => this.tasks.filter(task => {
-                return task.id !== data;
-            }))
-    }
-
     toggleEdit(event: Tasks){
         event.editing = !event.editing;
     }
 
-    editTask(event: Tasks): void{
+    editTask(event: Tasks){
         this.beforeEditing = event.title;
         event.editing = !event.editing;
         this.todoService.editTodo(event)
             .subscribe(data => this.tasks = this.tasks.map((task: Tasks )=>{
+                    
                     if (task.title === event.title){
                       task = Object.assign({}, task, event);
                     }
@@ -96,6 +87,10 @@ export class TodoList{
                   }));
     }
 
+    console(){
+        console.log("try function");
+    }
+
     doneEditing(task: Tasks):void{
         if(task.title.trim().length === 0){
             task.title = this.beforeEditing;
@@ -105,7 +100,7 @@ export class TodoList{
 
     cancelEditing(task: Tasks){
         task.title = this.beforeEditing;
-        task.editing = false;
+        // task.editing = false;
     }
 
     remaining(): number{
@@ -115,9 +110,23 @@ export class TodoList{
     atleastOneCompleted(): boolean{
         return this.tasks.filter(task => task.completed).length > 0;
     }
+    //delete function
+    deleteTask(tasks: Tasks){
+        this.tasks = this.tasks.filter(task => task.id !== tasks.id);
 
-    clearCompleted(): void{
+        this.todoService.deleteTask(tasks)
+            .subscribe(data => this.tasks.filter(task => {
+                return task.id !== data;
+            }))
+    }
+
+    clearCompleted(tasks: Tasks){
         this.tasks = this.tasks.filter(task => !task.completed);
+
+        this.todoService.deleteTask(tasks)
+            .subscribe(data => this.tasks.filter(task => {
+                return task == data;
+            }))
     }
 
     selectAll():void{

src/app/Todo-List-App/services/todo.service.ts

@@ -18,7 +18,6 @@ export class TodoService{
                 'Content-Type': 'application/json'
             })
         })
- 
     }
 
     editTodo(task: Tasks):Observable<Tasks[]>{

src/app/app.module.ts

@@ -7,11 +7,13 @@ import { AppComponent } from './app.component';
 import { TodoList } from './Todo-List-App/containers/TodoList/Todo-list.component';
 import { TodoService } from './Todo-List-App/services/todo.service';
 import { HttpClientModule } from '@angular/common/http';
+import { TodoEmptyComponent } from './Todo-List-App/components/todo-empty/todo-empty.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    TodoList
+    TodoList,
+    TodoEmptyComponent
   ],
   imports: [
     BrowserModule,