validation

db.json

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

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

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

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

@@ -25,6 +25,7 @@ li > *{
 
 .listBtn{
     max-width: 80px;
+    margin: 2px;
 }
 
 .main{

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

@@ -4,12 +4,15 @@
         <div class="header">
             <h1>TODO LIST</h1>
         </div>
+        <div *ngIf="remaining() !== 0">
             <div class="info"><input type="checkbox" (change)="selectAll()">Select All</div>
+        </div>
         <div class="inputDiv">
             <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">
+            <!-- all task completed template-->
+            <div *ngIf="remaining() === 0">
                 <todo-empty></todo-empty>
             </div>
             <ul>
@@ -23,7 +26,8 @@
                     </ng-template>
 
                     <!-- buttons switching -->
-                    <div *ngIf="!task.editing; else doneBtn" ><button class="btn btn-success listBtn"(click)="toggleEdit(task)" ><i class="fa fa-edit"> Edit</i></button></div>    
+                
+                    <div *ngIf="!task.editing; else doneBtn" ><button [ngClass] = "{disabled: task.completed}" 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); toggleEdit(task)" ><i class="fa fa-edit">Done</i></button>

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

@@ -100,7 +100,7 @@ export class TodoList{
 
     cancelEditing(task: Tasks){
         task.title = this.beforeEditing;
-        // task.editing = false;
+        task.editing = false;
     }
 
     remaining(): number{