Ngx-datatable Filter in header issue

Question

I am currently trying to implement a filtering system on my ngx-datatable grid.

Everything is working so far, I am able to filter on every column separately and combine the results of multiple filters.

However, I have recently been told that there were errors triggering as soon as someone highlights the text of the filter. It makes no sense to me especially since I'm not an experienced front developer. I think this is an issue related to the library itself and not to my code.

Here is a little GIF showing what is happening.

https://gyazo.com/f41fe4db230d3204bfeb6b4e1220f93d

And the content of the error :

DatatableComponent.html:65 ERROR TypeError: Cannot read property 'length' of undefined at Object.eval [as updateDirectives] (DatatableComponent.html:76) at Object.debugUpdateDirectives [as updateDirectives] (vendor.js:81724) at checkAndUpdateView (vendor.js:81120) at callViewAction (vendor.js:81361) at execEmbeddedViewsAction (vendor.js:81324) at checkAndUpdateView (vendor.js:81121) at callViewAction (vendor.js:81361) at execComponentViewsAction (vendor.js:81303) at checkAndUpdateView (vendor.js:81126) at callViewAction (vendor.js:81361)

Which makes no sense since I am 100% sure that the length property is correctly initialized.

Hoping someone has an idea about this ...

EDIT : So as mentioned in a comment below I'm now posting the fix we found.

We created the following directive :

import {Directive, HostListener} from "@angular/core";

@Directive({
  selector: "[selectStopPropagation]"
})
export class SelectStopPropagationDirective {
  @HostListener('select', ['$event'])
  public handleSelect(event: Event) {
    event.stopPropagation();
  }
}

Which we applied on every filter fields of our application :

<mat-form-field>
   <input matInput selectStopPropagation placeholder="Filter..." (keyup)='updateFilter($event,column.prop)'/>
</mat-form-field>

That's it. Hoping this will be useful to someone one day.

Jaykant Jaykant · Accepted Answer · 2019-03-07T09:48:47

Try using ngIf to avoid making datatable if result is empty

<div *ngIf="rows.length">
     <ngx-datatable
        class="material"
        [rows]="rows"
        [loadingIndicator]="loadingIndicator"
        [columns]="columns"
        [columnMode]="'force'"
        [headerHeight]="50"
        [footerHeight]="50"
        [rowHeight]="'auto'"
        [reorderable]="reorderable">
      </ngx-datatable>
   </div>

Ngx-datatable Filter in header issue

1 Answers