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{
@@ -81,4 +82,4 @@ input[type="checkbox"]{
     float: right;
     padding-right: 20px;
     color: rgb(42, 59, 59);
-}
+}

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

@@ -4,12 +4,15 @@
         <div class="header">
             <h1>TODO LIST</h1>
         </div>
-        <div class="info"><input type="checkbox" (change)="selectAll()">Select All</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,13 +26,14 @@
                     </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>
                     </div>
                     </ng-template>
-                    
+                
                     <div>
                         <button class="btn btn-danger listBtn" (click)="deleteTask(task)"><i   class="fa fa-trash"> Del</i></button>
                     </div>

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{