Incorporate personalized No Data Available message in ngx-datatable

How can I customize the no data message for ngx-datatable? I want to avoid displaying the default message that comes with it.

Here is what I have attempted so far:

<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>
 .........

I have added a custom div to show the "no data found" message. The searchDataNotFound flag is set to true when there is no data and false when there is data. However, the custom message is not displaying as expected, and only the default message from ngx-datatable is shown.

Thank you

angulartypescriptngx-datatable

Answer №1

An improved method is to directly include custom text for an empty array in ngx datatable using a property, like this:

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

Here is an example for better understanding:

<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'}">

Answer №2

You've mistakenly added an additional ">" before your *ngIf statement within the div element.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigating through a JSON dictionary in Svelte: A step-by-step guide

When working with Svelte, the #each construct allows for easy iteration over array-like objects. But what if you have a JSON dictionary object instead? Is there a way in Svelte to iterate over this type of object in order to populate a dropdown menu? The ...

javascripttypescript

A guide on determining the return type of an overloaded function in TypeScript

Scenario Here is a ts file where I am attempting to include the type annotation GetTokenResponse to the function getToken. import { ConfigService } from '@nestjs/config'; import { google, GoogleApis } from 'googleapis'; import { AppCon ...

javascriptnode.jstypescriptnestjsoverloading

Exploring the power of Angular 2 Directive scopes

When it comes to Angular2, Directives do not come with "scopes", unlike Components. However, in my specific case, I require a Directive to establish a scope. Take a look at my App component - it contains an HTML template, and the foo directive could potent ...

javascriptangularangular2-directives

What is the method for retrieving data from a node in Firebase Realtime Database using TypeScript cloud functions, without relying on the onCreate trigger?

Being a beginner with Firebase and TypeScript, I have been struggling to retrieve values from a reference other than the triggered value. Despite finding answers in JavaScript, I am working on writing functions using TypeScript for real-time database for A ...

androidtypescriptfirebasefirebase-realtime-databasegoogle-cloud-functions

Eslint is back and it's cracking down on unused variables with no

I've configured eslint to alert me about unused variables rules: { '@typescript-eslint/no-unused-vars': ['error', { args: 'none' }], } Presently, I have a TypeScript class structured like this: import { User } from &ap ...

typescripteslint

Using Material-UI with TypeScript

Attempting to integrate TypeScript/React with Material UI has been quite the challenge for me so far. Here is my index.tsx file: declare function require(p: string): any; var injectTapEventPlugin = require("react-tap-event-plugin"); injectTapEventPlugin( ...

reactjstypescriptmaterial-ui

Checking for unnecessary properties in Typescript with vue-i18n

Let's consider two different languages represented in JSON format: jp.json { "hello": "こんにちは" } ge.json { "hello": "hallo", "world": "welt" } Now, we are going to com ...

typescriptvue-i18n

The inversify middleware is executed a single time

I utilize Inversify for object binding in the following manner: container.applyMiddleware(loggerMiddleware); let module = new ContainerModule((bind: interfaces.Bind) => { bind<Logger>(TYPES.Logger).toConstantValue(logger); bind<ILogger ...

javascripttypescriptinversifyjs

Typescript issue: variable remains undefined even after being assigned a value in the constructor

In my code, I declared num1: number. constructor(){ ... this.num1 = 0; } This is all inside a class. However, when I try to log the value of this.num1 or typeof this.num1 inside a function using console.log(), it returns undefined in both cases. I ...

typescriptconsolenamespacesundefined

Using Node.js: Only bring in the necessary function, don't execute the entire file

Today, I stumbled upon an interesting observation and I'm curious about the peculiar behavior of node in this scenario. I have two files structured as follows: src/api/index-api.ts src/worker/index-worker.ts Both of these files contain a simple con ...

node.jstypescript

Angular2 - Automatically redirect back to referring URL once user successfully logs in

My Angular application is running smoothly on version 2.1.0, with protected routes using router Guards and canActivate. Whenever I try to access a protected area like "localhost:8080/customers," I immediately get redirected to the login page as expected. ...

angularangular2-routing

Notify user before exiting the page if there is an unsaved form using TypeScript

I am working on a script that handles unsaved text inputs. Here is the code for the script: export class Unsave { public static unsave_check(): void { let unsaved = false; $(":input").change(function(){ unsaved = true; ...

javascriptjquerytypescript

The data structure of '(string | undefined)[]' cannot be matched with type '[string | undefined]'

I've been working on a TypeScript project and I've encountered the ts(2322) error as my current challenge. Here's a snippet of my code: import { BASE_URL, AIRTABLE_BASE_ID, AIRTABLE_TABLE_STUDENT, AIRTABLE_TABLE_CLASSES, API_KEY, ...

arraystypescripttuples

Using Array.push within a promise chain can produce unexpected results

I have developed a method that is supposed to retrieve a list of devices connected to the network that the client has access to. export const connectedDevicesCore = (vpnId: string, vpnAuthToken: string) => Service.listVPNConnectionsCore ...

javascriptnode.jsarraystypescriptpromise

Include form data into an array of objects within an Angular data source

I am struggling to add the edited form data from edit-customers-dialog.ts into an array of objects in my datasource. The form.data.value is returning correctly, but I'm facing issues with inserting it properly into the array. As a beginner in Angular ...

javascriptangulartypescriptangular-materialangular-reactive-forms

Angular: avoid API errors from being displayed in the HTML template

While working with HTTP requests in my Angular app, I encountered an issue where a status code of 400 is returned for invalid data input, causing the HTML template not to be displayed on the view. Currently, I am handling this situation by: this.myServic ...

angularapitemplateshandle

Leveraging gzip files in production with Angular 2

I have recently implemented angular-cli to compile my application. After running `ng build --prod`, I noticed that the gzip bundle files are generated, but the index.html is still referencing the full-sized files. I attempted using `ng build --prod --aot ...

angulargzipangular-cliproduction-environment

What happens when a template reference variable is used more than once in a template?

Can you explain the functionality of template reference variables when the same variable name is used multiple times? What scoping rules apply when accessing this variable within the template? ...

angularscope

one-time occurrence of $mdToast injection within a parent class

Seeking advice on how to efficiently place a single instance of $mdToast (from Angular Material) into a base class (Typescript). In my UI, I have five tabs with separate controller instances and it seemed logical to centralize the $mdToast declaration in a ...

angularjstypescriptangular-material

The number pipe is unable to interpret the given value, either because it is outside of the allowable range or cannot be

An error occurred while processing the specified value, it seems to be either unparsable or out of the acceptable range. Whenever I apply formatting with a pipe to a number in my object, I encounter this warning and the value fails to display. However, on ...

angularangular-pipe