clearing form, deleting ingredient from the list of ingredients implemented with conditional message rendering on UI.

badripaudel77 · badripaudel77 · commit 5ca80ad95e23 · 2022-12-10T23:46:12.000+05:45
diff --git a/src/app/services/shopping-list.service.ts b/src/app/services/shopping-list.service.ts
@@ -46,4 +46,9 @@ export class ShoppingListService {
     this.ingredients.push(...addedIngredients);
     this.ingredientsChanged.next(this.ingredients.slice());
   }
+
+  deleteIngredient(index: number) {
+    this.ingredients.splice(index,1);
+    this.ingredientsChanged.next(this.ingredients.slice());
+  }
 }
diff --git a/src/app/shopping-list/shopping-edit/shopping-edit.component.html b/src/app/shopping-list/shopping-edit/shopping-edit.component.html
@@ -41,8 +41,8 @@ <h5>Add new ingredient</h5>
         <div class="col-xs-12 btn-group">
           <button class="btn btn-success" type="button"
                   (click)="onIngredientAdd(shoppingForm)" [disabled]="!shoppingForm.valid">{{ editMode ? 'Update' : 'Add' }}</button>
-          <button class="btn btn-danger">Delete</button>
-          <button class="btn btn-warning">Clear</button>
+          <button class="btn btn-danger" *ngIf="editMode" (click)="deleteIngredient(itemIndex)">Delete</button>
+          <button class="btn btn-warning" (click)="clearForm()">Clear</button>
         </div>
       </div>
     </form>
diff --git a/src/app/shopping-list/shopping-edit/shopping-edit.component.ts b/src/app/shopping-list/shopping-edit/shopping-edit.component.ts
@@ -51,6 +51,16 @@ export class ShoppingEditComponent implements OnInit, OnDestroy {
     },2000);
   }
 
+  clearForm() {
+    this.shoppingListForm.reset();
+    this.editMode = false;
+  }
+
+  deleteIngredient(index: number) {
+    this.shoppingListService.deleteIngredient(index);
+    this.clearForm();
+  }
+
   ngOnDestroy() {
     // clean up , prevent memory leak
     this.itemEditSubscription.unsubscribe();
diff --git a/src/app/shopping-list/shopping-list.component.html b/src/app/shopping-list/shopping-list.component.html
@@ -9,5 +9,10 @@
         <span>{{ingredient.name}} ({{ ingredient.amount }})</span>
       </a>
     </ul>
+    <div class="row" style="margin-top: 15px" *ngIf="!ingredients.length">
+      <div class="col-xs-12 alert alert-warning">
+        No Ingredients found, please add some !
+      </div>
+    </div>
   </div>
 </div>

Original file line number	Diff line number	Diff line change
`@@ -46,4 +46,9 @@ export class ShoppingListService {`
`46`	`46`	`this.ingredients.push(...addedIngredients);`
`47`	`47`	`this.ingredientsChanged.next(this.ingredients.slice());`
`48`	`48`	`}`
	`49`	`+`
	`50`	`+ deleteIngredient(index: number) {`
	`51`	`+ this.ingredients.splice(index,1);`
	`52`	`+ this.ingredientsChanged.next(this.ingredients.slice());`
	`53`	`+ }`
`49`	`54`	`}`