I'm encountering an issue that I need help with:
https://i.stack.imgur.com/4M54x.png
whenever I attempt to update the view using *ngIf to toggle on an icon display.
This is what my .ts file looks like:
@Component({
selector: 'app-orders',
templateUrl: './orders.component.html',
styleUrls: ['./orders.component.css'],
encapsulation: ViewEncapsulation.None
})
export class OrdersComponent implements OnInit, OnDestroy {
loadedPendingOrders: Order[] = [];
loadedProcessedOrders: Order[] = [];
loadedDeliveredOrders: Order[] = [];
loadedCancelledOrders: Order[] = [];
pendingOrderTimelines: string[] = [];
deliveredOrderTimelines: string[] = [];
cancelledOrderTimelines: string[] = [];
isDeliverySlotsActive: boolean;
searchTerm: string;
newOrderStatus: string;
private subscription: Subscription;
constructor(private ordersService: OrdersManagerService, private shopPreferencesService: ShopManagerService, private apiManager: ApiManagerService) {}
ngOnInit(): void {
this.subscription = timer(0, 5000).pipe(
switchMap(() => this.apiManager.fetchShopOrders())
).subscribe(orders => {
this.isDeliverySlotsActive = this.shopPreferencesService.isDeliverySlotsActive();
const loadedOrders: OrdersList = orders;
/* do something with orders */
});
}
onNewOrderAdded(status: string){
this.newOrderStatus = status;
}
....
}
And here is my .html file:
<div id="tab-group">
<mat-tab-group dynamicHeight animationDuration="400ms">
<mat-tab>
<ng-template mat-tab-label>
<span>Pending</span>
<img src="../../assets/my-orders/blue-tiny.svg" *ngIf="newOrderStatus == 'PENDING'">
</ng-template>
<app-orders-list
[orders]="loadedPendingOrders"
[timelines]="pendingOrderTimelines"
[isDeliverySlotsActive]="isDeliverySlotsActive"
[searchTerm]="searchTerm"
(newOrderStatus)="onNewOrderAdded($event)"
></app-orders-list>
...
</mat-tab>
</mat-tab-group>
</div>
Although the view updates correctly, the error persists. Any ideas why?
Appreciate any assistance.