I've encountered a common error in my Angular application, but I'm struggling to pinpoint why it's happening and how to resolve it. I've attempted various approaches such as using setTimeout, delay(0), and switching to different hooks, but none seem to work for me.
Issue Description:
The problem arises when I try to add a single product from a list of products to the cart with selected items //product.list.component.ts
addToProductCart(product: IProduct) {
this.productsService.addProductToSelectedProducts(product);
}
The service implementation is as follows:
//product.service.ts
@Injectable({
providedIn: 'root'
})
export class ProductsService {
selectedProducts: BehaviorSubject<IProduct[]> = new BehaviorSubject<IProduct[]>([]);
product = this.selectedProducts.asObservable();
...
}
When a product is selected on the header, the product count increases and is displayed on the cart icon:
//header.component.html
...
//header.component.ts
...
If the header cart icon is clicked, a dialog displaying the selected product is opened. If there are no selected products, an empty cart placeholder should be displayed:
//cart-details.component.html
...
//cart-details.component.ts
export class CartDetailsComponent implements OnInit, OnDestroy {
...
}
The <ng-template #emptyCart> displays correctly when the cart is empty, but an error related to 'loading-background' occurs, possibly originating from ngx-ui-loader library used in app.module:
//app.module
(...)
import { NgxUiLoaderModule, NgxUiLoaderHttpModule, NgxUiLoaderConfig, SPINNER, POSITION, PB_DIRECTION } from 'ngx-ui-loader';
imports: [
...
NgxUiLoaderModule.forRoot(ngxUiLoaderConfig),
NgxUiLoaderHttpModule,
]
Any insights on what might be causing this issue and how to address it would be greatly appreciated. Unfortunately, attempts to reproduce the problem on stackblitz have been unsuccessful so far. Here's the link for reference: https://stackblitz.com/edit/angular-h3xyop?file=src%2Fapp%2Fproduct-list%2Fproduct-list.component.ts