Check array length in angular 5 *ngIf displays nothing

Question

I am doing an *ngif to check if fitered results length is not 0 display items else display a template error.

Unfortunately, the templateref works only when the filtered results has items.

when it doesn't, the result.length displays nothing.

<div *ngFor="let collection of collections | async | filterBy: ['title']: search as result">
       <ng-container *ngIf='result?.length != 0; 
           then resultsIs else noresults'>
       </ng-container>

        <ng-template #resultsIs>
          <a routerLink="/collections/c/{{collection.title | 
            slugify}}/{{collection.id}}" 
               class="list-group-item list-group-item-action flex-column align-items-start"
          >
        <div class="d-flex w-100 justify-content-between">
          <h5 class="mb-1 text-primary"><u>{{collection.title}}</u></h5>
           <small>{{collection.updatedAt}}</small>
           </div>
           <p class="text-muted" >{{collection.description}}</p>
           <small>{{collection.username}}</small>
      </a>
    </ng-template>

    <ng-template #noresults>
     <div class="alert alert-info">
    <strong>No Match Found!</strong>
     Widen your search.</div>
       </ng-template>
     </div>

How can I check correctly if this object array length is less than zero so I can display this part of template

 <ng-template #noresults>
        <div class="alert alert-info"><strong>
          No Match Found!</strong> Widen your search.
         </div>
</ng-template>

Answer 1

The *ngIf for your template is inside a ngFor, which loops through a filtered list.

I'm no sure exactly how you implemented your filter pipe, but I guess it will return an empty set if the list of collections does not match the filter criterion.

In that case, as normal behaviour, the ngFor will not render any element, so everything inside will never be evaluated by angular

What you'd need is to specify a default template if there is no element in the list provided to ngFor. This is not supported yet, but by looking at the recent commits for this request, this might be available soon

https://github.com/angular/angular/issues/14479

Meanwile, you can do something like this

<div *ngIf='collections | async | filterBy: ['title']: search'; let filteredCollections>


    <div *ngFor="let collection of filteredCollections">


              <a routerLink="/collections/c/{{collection.title | 
                slugify}}/{{collection.id}}" 
                   class="list-group-item list-group-item-action flex-column align-items-start"
              >
            <div class="d-flex w-100 justify-content-between">
              <h5 class="mb-1 text-primary"><u>{{collection.title}}</u></h5>
               <small>{{collection.updatedAt}}</small>
               </div>
               <p class="text-muted" >{{collection.description}}</p>
               <small>{{collection.username}}</small>
          </a>


     </div>



    <div class="alert alert-info" *ngIf='filteredCollections.length === 0'>
        <strong>No Match Found!</strong>
        Widen your search.
    </div>

</div>