Modifier was not working as when the data came late, it would display blank.

bookie/src/app/sales/modifiers/modifiers.component.html

@@ -1,6 +1,6 @@
 <mat-dialog-content>
   <mat-tab-group>
-    @for (item of list; track item) {
+    @for (item of list | async; track item.id) {
       <mat-tab>
         <ng-template matTabLabel>
           <span>{{ item.name }}</span>

bookie/src/app/sales/modifiers/modifiers.component.ts

@@ -1,4 +1,5 @@
 import { CdkScrollable } from '@angular/cdk/scrolling';
+import { AsyncPipe } from '@angular/common';
 import { Component, Inject } from '@angular/core';
 import { MatBadge } from '@angular/material/badge';
 import { MatButton } from '@angular/material/button';
@@ -16,10 +17,20 @@ import { ModifierCategory } from '../../core/modifier-category';
   selector: 'app-modifiers',
   templateUrl: './modifiers.component.html',
   styleUrls: ['./modifiers.component.css'],
-  imports: [CdkScrollable, MatDialogModule, MatTabsModule, MatChipsModule, MatBadge, MatCard, MatRipple, MatButton],
+  imports: [
+    CdkScrollable,
+    MatDialogModule,
+    MatTabsModule,
+    MatChipsModule,
+    MatBadge,
+    MatCard,
+    MatRipple,
+    MatButton,
+    AsyncPipe,
+  ],
 })
 export class ModifiersComponent {
-  list: ModifierCategory[] = [];
+  list: Observable<ModifierCategory[]>;
   selected: Modifier[];
   selectedIds: (string | undefined)[];
 
@@ -27,9 +38,7 @@ export class ModifiersComponent {
     @Inject(MAT_DIALOG_DATA)
     public data: { list: Observable<ModifierCategory[]>; selected: Modifier[] },
   ) {
-    this.data.list.subscribe((list: ModifierCategory[]) => {
+    this.list = data.list;
-      this.list = list;
-    });
     this.selected = data.selected;
     this.selectedIds = this.selected.map((e) => e.id);
   }