Route change event from table row click disrupts Angular change detection

I’m submitting a … (check one with “x”)

[ x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior I have a ngx-datatable that I have setup with each row to act like a button to route to another view. On click, a route change is triggered and the view is replace by another page which should destroy the page the table is on. This seems to work great on Chrome but I’m having issues on Edge.

When Edge makes the change there is a bug where the following view isn’t rendered unless I trigger change detection manually with ChangeDetectorRef.detectChanges(). The routed view seems to only render the template with little-to-no bootstrapping of the component. The original page is still visible below the new view.

When I debug the problem it looks like the constructor is called but not the ngOnInit method. My current work-around is to run a setTimeout in the constructor and run change detection.

Another layer of strangeness is I’m only getting this bug on clicks from the second or later pages of content in the datatable. Clicks in the first rendered page seem to be fine and bootstrap the new route correctly. I’m also not getting any errors in the Edge console.

Expected behavior

Upon clicking on a row in the datatable the click handler would change the route and the following view will bootstrap correctly. The table will allow change detection to trigger regularly and process the route change appropriately.

Reproduction of the problem

I’ll try to reproduce in a plnkr but here’s an example of my current table use:

<ngx-datatable
    #datatable
    class="material striped"
    [headerHeight]="50"
    [footerHeight]="50"
    [rows]="outputRows$ | async"
    [selected]="selected"
    [selectionType]="'checkbox'"
    (select)='onSelect($event)'
    columnMode="flex"
    [selectAllRowsOnPage]="false"
    [rowHeight]="50"
    [scrollbarV]="true"
    (activate)="handleEvent($event)"
  >
    <ng-content></ng-content>
  </ngx-datatable>

What is the motivation / use case for changing the behavior?

Seems to be a serious bug on Edge.

Please tell us about your environment:

Basic Angular CLI built project served up on OSX and run on Browserstack’s Edge 16 browser. Also reproduced on Windows 10 running Edge 16.

• Table version: 11.1.5

• Angular version: 5.2.0

• Browser: [ Edge 16 ]

• Language: [TypeScript 2.4.2]

[hoffination]

@molcik I also started seeing this problem occur on Chrome for my app as well. It looks like I found a fix for my app. Can you try out my fix and see if it resolves the issue on your end?

[hoffination]

@Koslun Glad to hear that the fork was able to resolve your issue. I put in a PR in late January but the repository owner didn’t like the potential for slowdown that came with my solution. He suggested using ngZone within your callback handlers which worked well for me instead of my fork. Here’s a link to the PR:

https://github.com/swimlane/ngx-datatable/pull/1238