refactored

db.json

@@ -1,10 +1,16 @@
 {
   "tasks": [
     {
-      "title": "Angular 6",
+      "title": "Sleep",
       "completed": false,
       "editing": false,
       "id": 1
+    },
+    {
+      "title": "Dance",
+      "completed": false,
+      "editing": false,
+      "id": 2
     }
   ]
 }

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

@@ -1,4 +1,4 @@
-<div>
+<div @fade>
   <h3>All Task Accomplished 👻</h3>
   <div class="img-div">
     <img src="../../../../assets/to-do.png" alt="to-do">

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

@@ -1,9 +1,22 @@
 import { Component, OnInit } from '@angular/core';
+import { animate, style, transition, trigger } from '@angular/animations';
 
 @Component({
   selector: 'todo-empty',
   templateUrl: './todo-empty.component.html',
-  styleUrls: ['./todo-empty.component.css']
+  styleUrls: ['./todo-empty.component.css'],
+  animations: [
+    trigger('fade', [
+        transition(':enter', [
+            style({opacity: 0, transform: 'translateX(-30px)'}),
+            animate(1200, style({opacity:0, transform: 'translateY(0px)'}))
+        ]),
+        transition(':leave', [
+            style({opacity: 0, transform: 'translateX(0px)'}),
+            animate(1000, style({opacity:1, transform: 'translateX(-50px)'}))
+        ])
+    ])
+]
 })
 export class TodoEmptyComponent implements OnInit {
 

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

@@ -43,7 +43,7 @@
                 <div>{{ remaining()}} uncompleted tasks</div>
             </div>
             <div *ngIf="atleastOneCompleted()">
-                <button class="btn btn-warning btn-block" (click) ="clearCompleted() && deleteCompleted(task)">Clear Completed</button> 
+                <button class="btn btn-warning btn-block" (click) ="clearCompleted(); deleteCompleted(task)">Clear Completed</button> 
                 <div class="alert alert-warning">You've selected an item</div>
             </div>
             

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

@@ -123,10 +123,10 @@ export class TodoList{
     clearCompleted(tasks: Tasks){
         this.tasks = this.tasks.filter(task => !task.completed);
 
-        this.todoService.deleteTask(tasks)
-            .subscribe(data => this.tasks.filter(task => {
-                return task == data;
-            }))
+        // this.todoService.deleteTask(tasks)
+        //     .subscribe(data => this.tasks.filter(task => {
+        //         return task == data;
+        //     }))
     }
 
     selectAll():void{