Published 2020-05-09
Until a while ago, I still couldn't convince myself when I should use Angular If Else Directives.
This is due to most of the time, writing 2 *ngIf
(refer the below code) was enough to support my use case.
<!-- Render when there is products -->
<div *ngIf="products">There are products</div>
<!-- Render when there isn't a single product -->
<div *ngIf="!products || products.length === 0">Loading...</div>
<!-- Render when there is products -->
<div *ngIf="products; else loadingView">
There are {{products.length}} products available.
</div>
<!-- Render when loadingView being called -->
<ng-template #loadingView><p>Loading...</p></ng-template>
After several round of thinking, I finally able to discover the reasons that are enough to persuade myself to use ngIf else
.
ngIf else
allows you to reduce one if validation. You don't have to write two *ngIf
validation.loadingView
declared above code. For e.g, you can reuse the loadingView
when you're retrieving data from server or submitting data to server.