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

Guide on positioning a span element to the left using the margin auto property in CSS for Angular 4

Having trouble with moving numbers highlighted to the left with names in CSS. I've tried using flex direction and margin auto but can't achieve the desired result. Here is my HTML code: <section class="favorites"> <div class="category" ...

javascripthtmlcssangulartypescript

The Angular project was functioning properly when tested locally, but encountered an error in the Quill Editor during the building process

I have encountered an issue when deploying my Angular 8 + Quill project. Everything works fine locally with 'ng serve', but upon deployment, I am facing the following error. Despite trying various solutions like updating Angular or deleting &apos ...

angulartypescriptquillngx-quill

Resolve the issue with automatically generating SCSS type definitions (style.d.ts) for Preact within a TypeScript webpack setup

Utilizing webpack with Preact 10.x (nearly identical to React) and TypeScript in the VSCode environment. Following an update from Node version 12 to version 14, there seems to be a problem where *.scss files no longer automatically generate their correspo ...

javascriptreactjstypescriptwebpackpreact

What causes a compilation error to occur when a mapped type is invoked inside a class?

Below is a code snippet for review. An error occurs when calling the get method within the class, but works fine when called outside. Any thoughts on why? type DefinedKeys<T> = keyof { [K in keyof T as undefined extends T[K] ? never : K]: K } cla ...

typescriptmapped-types

Ensure that test cases in Angular2 include a line that covers conditions for returning values

I'm having trouble implementing test coverage for an online platform, as I'm not sure how to approach it. Within my service method, I have the following code: public getResults() { return this.http(url,body).map(this.mapResponse); } private ...

javascriptangularkarma-jasmine

Exploring the world of dynamic locale with Angular 5 Pipes

My current situation involves having apps created in angular 4 and I am contemplating upgrading to angular 5. After researching how locale is managed in the pipes, it appears that upgrading may not be feasible. It seems that there are two options provided: ...

angularangular-i18nangular5

Creating a comprehensive object within a single interface using Typescript

Here is an example of an Object in TypeScript: export class test{ recordname: string; comments: [{ comment: string }] } To define it using one interface instead of multiple interfaces, you can try something like this: export int ...

typescript

Error encountered while utilizing a custom third-party component within an Angular project during static analysis

Currently, I am utilizing an Angular (2+) datepicker component (link to Github) in two separate Angular projects: Angular CLI v1.0.0-beta.30, Angular v2.3 Angular CLI v1.0.0, Angular v4.0 The first project works flawlessly both during development with n ...

javascriptangularangular2-aot

Organizing an array based on designated keywords or strings

Currently, I am in the process of organizing my logframe and need to arrange my array as follows: Impact Outcomes Output Activities Here is the initial configuration of my array: { id: 15, parentId: 18, type: OUTPUT, sequence: 1 }, { id: 16, parentId: ...

javascripttypescript

Having trouble manipulating text or values of angular elements with Selenium and Python

https://i.stack.imgur.com/vZdo0.png I am facing an issue with a date input field that does not have a calendar or dropdown for selection. I tried using driver.find_element_by_id('dataInicio').send_keys(date_value) but it doesn't seem to work ...

pythonangularseleniumxpathcss-selectors

Retrieve all articles from a user using the TypeORM - findAll function

Is there a way to retrieve all articles of a specific user using the TypeORM package? In Sequelize, I have the following function: async findAllByUser(userUuid: string, findOptions: object): Promise<Article[]> { return await Article.findAll< ...

typescripttypeorm

Having trouble writing Jest test cases for a function that returns an Observable Axios response in Nest JS

I'm relatively new to the NestJS + Typescript + RxJs tech stack and I'm attempting to write a unit test case using Jest for one of my functions. However, I'm uncertain if I'm doing it correctly. component.service.ts public fetchCompon ...

node.jstypescriptrxjsjestjsnestjs

A guide on initializing an Angular 2 component and setting public properties

My service is returning the expected data when injected into a component. However, I am encountering an issue where the response remains undefined when I subscribe to the service method and assign it to a public variable during initialization of the compon ...

angularangular2-services

Determine the accurate data type while iterating through a for loop

I am facing an issue where I have around 40 unique actions defined, all with the same parameters except for each being provided with a different schema which is causing the problem type ActionName = 'replaceText' | 'replaceImage'; type ...

typescriptfor-loopcastingtype-inference

Is it possible to dynamically pass a component to a generic component in React?

Currently using Angular2+ and in need of passing a content component to a generic modal component. Which Component Should Pass the Content Component? openModal() { // open the modal component const modalRef = this.modalService.open(NgbdModalCompo ...

javascripthtmlangulartypescriptbootstrap-modal

How to make sure a bootstrap row fills the rest of the page without exceeding the height of the screen

In my Angular application, I am using bootstrap to create the following structure (simplified version). <div class="container"> <div class="header> <div class="mat-card> <!-- Header content --> < ...

cssangulartwitter-bootstrap

Understanding how to extract an enum from a string and its corresponding value in TypeScript

I am working with a simple enum called errorCode, shown below: export enum SomeErrorCodes { none = 0, notFound = 1, duplicated = 2 } Currently, I am receiving the name of the enum as a string "SomeErrorCodes" and a number, for example, 1. How ...

typescriptenums

What is the equivalent of a "Class" in Typescript for defining an "Interface"?

I am interested in passing "Interfaces" to a function. Not just a specific interface, but any interfaces. As explained here, for Class, I can handle it as a type. export type ClassType<T> = { new(...args: any[]): T }; function doSomethingWithAnyCla ...

typescriptinterface

Unable to access pathways from a separate source

In my app.component.ts file, I have two router outlets defined, one with the name 'popup': @Component({ selector: 'app-main', template: `<router-outlet></router-outlet> <router-outlet name="popup" ...

angulartypescriptjhipster

Determine in JavaScript if one date occurs exactly one week after another date

Currently, I am tackling a date comparison task for our application. The main objective is to compare the Start Date inputted by the user with the Operator/Region Effective Date, which signifies when a new list of product prices becomes valid. Our aim is t ...

javascriptreactjstypescript