How do I use the *ngIf then else with relational operators?-CodePudding

What is the correct way of doing a ngIf then else when you have a count involved? Please refer to the example below for more info:

<div *ngIf={{ returnedTotalResults }} > 0 then #paging;else #no_data_found></div>
<pagination #paging></pagination>
<p #no_data_found>No results found</p>

CodePudding user response：

You need to put your ngIf as a string, some some tags around and remove the string interpolation:

    <div *ngIf=" returnedTotalResults > 0; else no_data_found">
        <pagination></pagination>
    </div>
    <ng-template #no_data_found>
        <p>No results found</p>
    </ng-template>

https://angular.io/api/common/NgIf

CodePudding user response：

You can separate your *ngIf code with no worries. I feel like this approach could work:

  <div *ngIf="returnedTotalResults > number; else #paging">{{ returnedTotalResults }}></div>
  <pagination #paging></pagination>
  <p *ngIf="returnedTotalResults == 0">No results found</p>

Or, if you prefer, use a [ngSwitch] to avoid too much *ngIf:

<container-element [ngSwitch]="returnedTotalResults">
    <ng-container *ngSwitchCase="0">your text</ng-container>
    <ng-container *ngSwitchCase="anotherCase">your text</ng-container>
    <ng-container *ngSwitchCase="anotherCase">your text</ng-container>
</container-element>