Add Custom No Data To Display for ngx-datatable

Question

How can i add a custom no data to display for ngx-datatable. I don't want the no data to display that comes with ngx-datatable.

What i tried is below

<div *ngIf="showTable">
   <ngx-datatable [rows]="rows">
    <div *ngIf="searchDataNotFound" >
          <img src="nodata.png"/>
            <span> No Contacts to display</span>
      </div> 
  <div class="clear-search-text"(click)="clearSearch(searchComponentHook)>Clear Search</div>
     <ngx-datatable-column *ngFor="let column of columns" 
     [name]="column.name">
      .....
       <ngx-datatable-column>
     
 <ngx-datatable>
 .........

Like this I am keeping a div to show the no data found. the searchDataNotFound flag will be true when there is no data and is false when there is data. But it is not showing at all. Its Showing only the no data to display from ngx-datatable.

Thanks

Answer 1

There is an extra closing ">" on the div before your *ngIf.

Answer 2

Better way you can directly add custom text for empty array to ngx datatable with property. Like this.

[messages]="{emptyMessage: 'No Contacts to display'}"

you can see the exmple:

<ngx-datatable
            #tabData
            class="bootstrap mt-3"
            [columnMode]="'force'"
            headerHeight="50"
            footerHeight="50"
            rowHeight="60"
            [limit]="10"
            [scrollbarH]="true"
            [count]="totalCount"
            [offset]="pageNumber"
            [externalPaging]="true"
            (page)="setPage($event)"[rows]="rows" [messages]="{emptyMessage: 'No Contacts to display'}">