add sync topping & recipelist

client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.ts

@@ -284,8 +284,6 @@ export class RecipeListComponent implements OnInit {
           emitted_res.push(recipeDetailMat);
         });
 
-        // do another emit
-
         this.recipeListFormChange.emit([this.toppingList, emitted_res] as unknown[]);
       } else {
         this.recipeListFormChange.emit([]);
@@ -561,8 +559,9 @@ export class RecipeListComponent implements OnInit {
   };
 
   onToppingSetChange = (event: any, index: number) => {
-    // console.log('onToppingSetChange at index', index, "get event", event);
+    // where index is the actual index of slot opened for topping
     this.toppingList[event[0]] = event[1];
-    // console.log('onToppingSetChange', this.toppingList);
+    // trigger emitter
+    this.recipeListFormChange.emit([this.toppingList, this.recipeListData.value]);
   }
 }

client/src/app/features/recipes/recipe-details/recipe-topping/recipe-topping.component.html

@@ -2,7 +2,7 @@
   <div formArrayName="toppingList" *ngFor="let topping of toppingList.controls; let i = index">
     <div formGroupName="{{ i }}">
 
-      <input type="checkbox" />
+      <input type="checkbox" formControlName="isUse"/>
     <!-- toppingGroup -->
     <ng-select
       appendTo="body"

client/src/app/features/recipes/recipe-details/recipe-topping/recipe-topping.component.ts

@@ -117,11 +117,10 @@ export class RecipeToppingComponent implements OnInit {
       });
     });
 
-
     // emit value changes
     this.toppingForm.valueChanges.subscribe((value) => {
-      console.log('emit value', value);
+      console.log('emit value', value, 'for index: ', this.index! - 1);
-      this.toppingSetChange.emit([this.index, this.toppingList.value]);
+      this.toppingSetChange.emit([this.index! - 1, this.toppingList.value]);
     });
   }
 
@@ -149,13 +148,12 @@ export class RecipeToppingComponent implements OnInit {
   getDefaultOfGroup(groupID: any) {
     this.toppingList.controls.forEach((control) => {
       if ((control.value as any).groupID == groupID) {
-
         let newDefault = (this.allToppingsDefinitions as any).find(
           (x: any) => x.groupId == groupID
         )!.default;
 
         control.get('defaultIDSelect')?.setValue(newDefault);
       }
-    })
+    });
   }
 }