how to show no data found in grid table uisng angular 4?

Question

Hi i am using angular 4 and i need to show no data found while i searching grid table search box,its not showing,how to show?????

pipe.ts:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'category' })
export class CategoryPipe implements PipeTransform {
  transform(categories: any, searchText: any): any {
   if(searchText == null) return categories;

  return categories.filter(function(category){
      return category.CategoryName.toLowerCase().indexOf(searchText.toLowerCase()) > -1; 
    })
  }
}

ang.html:

  div class="form-group"> <div class="col-md-6" >
    <input type="text" [(ngModel)]="searchText"  class="form-control" placeholder="Search By Category" />
                    </div> </div>  
    <div class="col-md-12">
        <table class="table table-responsive table-hover">
          <tr>
            <th >Category ID</th>
            <th>Category</th>
            <th>Description</th>
          </tr>
          <tr *ngFor="let item of records | category: searchText">  
        <div *ngIf="(item | category: searchText).length === -1">
                "No data matches"</div>        
            <td>{{item.CategoryID}}</td>
            <td>{{item.CategoryName}}</td>
            <td>{{item.Description}}</td>                
          </tr>
        </table>
      </div>

component: This one component of showing the values in grid table,

this.records= [
    { CategoryID: 1,  CategoryName: "Beverages", Description: "Coffees, teas" },
    { CategoryID: 2,  CategoryName: "Condiments", Description: "Sweesavory" },];

Answer 1

Replace

<div *ngIf="(item | category: searchText).length === -1">

with

<div *ngIf="(item | category: searchText).length === 0">

A length can never be < 0

Edit: I misread the code. Try this

  <tr *ngIf="(records | category: searchText).length === 0">
            <td colspan=3>No data matches"</td>
  </tr> 

  <tr *ngFor="let item of records | category: searchText">  
    <td>{{item.CategoryID}}</td>