My scenario is as follows:
- I have a function that returns an array
- I need to conditionally render a component - only if the array exists and its length is greater than zero.
- The returned array should be passed as an
@Input()to this component.
Since the content of the array is computed, I want to avoid calling the function multiple times and using a getter is not suitable for this situation.
I've experimented with various approaches, including:
<order-list *ngIf="customer.getOrders() as orders && orders.length > 0" [orders]="orders" ></order-list>
<order-list *ngIf="(customer.getOrders() as orders) && orders.length > 0" [orders]="orders" ></order-list>
<order-list *ngIf="(customer.getOrders()) as orders && (orders.length > 0)" [orders]="orders" ></order-list>
Unfortunately, I keep encountering several errors:
Template parse errors: TypeError: Cannot read property 'toUpperCase' of undefined ("<div>
Parser Error: Unexpected token &&, expected identifier, keyword, or string at columnParser Error: Missing expected ) at column 23
[ERROR ->]*ngIf="(customer.getOrders() as orders) && orders.length > 0"
Check out this stackblitz link for the issue above.