CODEWITHSUNDEEP
angular
Smit
Smit

Reputation: 2138

Search filter if empty display a message

In Angular 4, I am trying to iterate a programs array. And Also added search pipe to it. If there is no search found, I want to display a message.

How can I approach this issue?

Here is the ngFor

<div class="col-sm-6 col-md-4" *ngFor="let programme of programmes | search: searchText">
    <programme [programme]="programme"></programme>
  </div>

I understand that I am unable to use ngIf and ngFor together. Is there any way I can use ngIfElse? if no search found, then display a message?

Upvotes: 0

Views: 1409

Answers (1)

CharanRoot
CharanRoot

Reputation: 6325

In your pipe if result was empty you can return -1 or some value 

 transform(value, searchTerm) {
    let result = ...
    if(result.length === 0) {
      return [-1];
    }
    return result;
  }

In your html code you can do like 

<ng-container class="col-sm-6 col-md-4" *ngFor="let programme of programmes | search: searchText">
  <div *ngIf="item === -1">"No matches"</div>
  <div *ngIf="item !== -1"><programme [programme]="programme"></programme></div>
</ng-container>

Upvotes: 3

Related Questions