add topping edit to recipelist WIP

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

@@ -1,27 +1,38 @@
-<div>
-  <input type="checkbox" />
-  <!-- toppingGroup -->
-  <ng-select
-    appendTo="body"
-    [clearable]="false"
-    [compareWith]="this.compareFunc"
-    formControlName="groupID"
-  >
-    <ng-option
-      *ngFor="let item of allToppingsDefinitions"
-      [value]="item.groupId.toString()"
+<div [formGroup]="toppingForm">
+  <div formArrayName="toppingList" *ngFor="let topping of toppingList.controls; let i = index">
+    <div formGroupName="{{ i }}">
+
+      <input type="checkbox" />
+    <!-- toppingGroup -->
+    <ng-select
+      appendTo="body"
+      [clearable]="false"
+      [compareWith]="this.compareFunc"
+      formControlName="groupID"
+      (close)="getDefaultOfGroup(getGroupIdByIndex(i))"
     >
-      <div>{{ item.name }} ({{ item.groupId }})</div>
+      <ng-option
+        *ngFor="let item of allToppingsDefinitions"
+        [value]="item.groupId.toString()"
+      >
+        <div>{{ item.name }} ({{ item.groupId }})</div>
+      </ng-option>
+    </ng-select>
+    <!-- defaultSelect -->
+    <ng-select
+      appendTo="body"
+      [clearable]="false"
+      [compareWith]="this.compareFunc"
+      formControlName="defaultIDSelect"
+    >
+      <ng-option
+      *ngFor="let item of getMembersByGroupId(getGroupIdByIndex(this.index!))"
+      [value]="item.id.toString()"
+    >
+      <div>{{ item.name }} ({{ item.id }})</div>
     </ng-option>
-  </ng-select>
-  <!-- defaultSelect -->
-  <ng-select
-  >
-    <!-- <ng-option
-      *ngFor="let item of getMembersByGroupId(getGroupIdByIndex(this.index))"
-      [value]="item.defaultId.toString()"
-    >
-      <div>{{ item.name }} ({{ item.defaultId }})</div>
-    </ng-option> -->
-  </ng-select>
+    </ng-select>
+  </div>
+    </div>
+
 </div>