From b46fd10f5a87c4660fd1b6407518849cfe1f997d Mon Sep 17 00:00:00 2001
From: Amritanshu <git@tanshu.com>
Date: Tue, 17 Dec 2024 22:26:35 +0530
Subject: [PATCH] Modifier was not working as when the data came late, it would
 display blank.

---
 .../sales/modifiers/modifiers.component.html  |  2 +-
 .../sales/modifiers/modifiers.component.ts    | 19 ++++++++++++++-----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/bookie/src/app/sales/modifiers/modifiers.component.html b/bookie/src/app/sales/modifiers/modifiers.component.html
index ffa93f1..c41fc96 100644
--- a/bookie/src/app/sales/modifiers/modifiers.component.html
+++ b/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>
diff --git a/bookie/src/app/sales/modifiers/modifiers.component.ts b/bookie/src/app/sales/modifiers/modifiers.component.ts
index f9a32c0..7975b29 100644
--- a/bookie/src/app/sales/modifiers/modifiers.component.ts
+++ b/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 = list;
-    });
+    this.list = data.list;
     this.selected = data.selected;
     this.selectedIds = this.selected.map((e) => e.id);
   }