How to hide something when no search result found in angular

Issue

In my homepage I have a search bar and a list of user favorite cards. Only If there is no favorited cards on the initial browser load and when a user removed all their favorite cards then it’ll show a banner "Add a favorite…".

The problem I have right now is the banner is displaying when I search something on the search-bar and found no favorited card. How do I fix that?. I don’t want to show my banner if there is no search result found.

If I do favorites.size == 0 instead then the banner is not showing up at all when browser load or user removed all their cards.

  <div class="input">
    <form class="search-form">
      <input #searchValue id="input-field" class="input-field" type="search"
        name="insightSearchFilter" (ngModelChange)="filterChanged($event)" [formControl]="inputCtrl"/>  
      <p class="hint" *ngIf="inputCtrl.value">
        <strong> {{ favorites?.length }} Search Result for </strong><em>"{{ inputCtrl?.value }}".</em>
        <strong> The Results listed below are exact matches for your query.</strong>
      </p>
    </form>
  </div>
  
  <div *ngIf="favorites">
    <div *ngIf="favorites.length > 0">
      <app-card-list [cards]="favorites"></app-card-list>
    </div>
    <div *ngIf="favorites.length == 0" class="empty-faves-container">
      <div class="add-faves-container">
        <div class="add-faves-ico"></div>
        <div class="text">Add a Favorite</div>
      </div>
    </div>
  </div>

Solution

Since you are filtering this.favorites in filterChanged methods. You should apply check for search text also along with length check.
like

(favorites.length == 0 && !(inputCtrl.value))

Answered By – Suraj Mathe

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.