I have a page in which I display a list of products contained inside an order, and a button to add more products. I must keep this structure, which is working perfectly fine when I’m opening an existing order. However, when I’m trying to create a new order, the condition inside the ngIf is undefined, and so the check fails.
What’s the best way to handle such a case, to make it so that the definition of the value products never fails or is there a better way to do it? In any case, how can I make it so that even if the order doesn’t have products (or they’re undefined), the div gets shown anyway?
<div
*ngIf="
order
| map: 'product'
| products
| ngrxPush as products
"
>
<!-- Order info -->
</div>
>Solution :
Simply use the safe navigation operator ? in condition; it will handle an undefined value.
<div *ngIf="(order?.products || []) | products | ngrxPush as products">
<!-- Order info -->
</div>