How to handle undefined arrays in Angular for different templates?

Question

I am working on a search screen for an application. I figure to have three outcomes in the results section.

If the user has not attempted a search, then display nothing.
If the user has attempted a search and the array is empty, then display "no results".
If the user has attempted a search and the array is not empty, then loop over and display the results.

I can get the empty vs non-empty working just fine:

<ng-container *ngIf="results.length">
    <div class="result" *ngFor="let result of results">
        <a href="link-goes-here">Open Result</a>
        <search-result  [result]="result"></search-result>
    </div>
</ng-container>
<ng-container #elseBlock>
    No Results dude.
</ng-container>

But, when I attempt to mix in a check if results is undefined, it doesn't seem to work properly. I tried to use [ngSwitch], but that doesn't seem to work either. I could just create a boolean variable which is false at first, then set to true once a search is performed, but I'd rather have my array start off as undefined and then get assigned after the first search.

Muhammed Albarmavi · Answer 1 · 2020-02-29T03:52:59.830

1

you need to use safe navigation operator ?. in case result is null or undefined elseBlock will be visible

<ng-container *ngIf="results?.length;else elseBlock">
    <div class="result" *ngFor="let result of results">
        <a href="link-goes-here">Open Result</a>
        <search-result  [result]="result"></search-result>
    </div>
</ng-container>

<ng-template #elseBlock>
    No Results dude.
</ng-template>

edited Feb 29 '20 at 03:52

answered Feb 28 '20 at 14:46

Muhammed Albarmavi

23,240
8
66
91

I'm not sure why, but the else block shows up even if the results show up. Additionally, this answer doesn't specify how to display nothing if the user has not attempted a search (i.e. **results** is `undefined`). – michael Feb 28 '20 at 19:33
I have update the answer I forget to set the else case – Muhammed Albarmavi Feb 29 '20 at 03:42
@michael note the else block is ng-template not a ng-container – Muhammed Albarmavi Feb 29 '20 at 03:58

score 1 · Accepted Answer · answered Feb 29 '20 at 04:11

This should cover your three outcomes. Assuming results is null or undefined by default, we first check if it exits. If it does, check if it has any values or not. If the user has not searched yet, then the *ngIf will return false and wont render anything.

<ng-container *ngIf="results">
    <ng-container *ngIf="results.length > 0; else elseBlock >
       <div class="result" *ngFor="let result of results">
          <a href="link-goes-here">Open Result</a>
          <search-result  [result]="result"></search-result>
       </div>
    </ng-container>

    <ng-template #elseBlock>
        No Results dude.
    </ng-template>

</ng-container>

I miss this one , good job you can fork this demo https://stackblitz.com/edit/angular-b4kuvg and updated base of your answer — Muhammed Albarmavi, Feb 29 '20 at 04:40

How to handle undefined arrays in Angular for different templates?

2 Answers2