Ngx-datatable: Virtual scroll causes issues with auxilary (named) routes

[yusijs]

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
When virtual scroll is activated on a datatable, this breaks auxilary (named) routing.

Basically:

• Create an aux route
• Create a datatable with virtual scroll, and create a routerLink to the aux route inside the datatable
• Click the link - it opens as expected
• Scroll down a few pages
• Click another link - note that the URL changes, but the component data never changes, and the ngOnInit hook never triggers
• Scroll in the table - the component now loads

Static text can still load, but none of the angular hooks are triggered.

Expected behavior
The aux route should load correctly, with the component initializing with the lifecycle hooks.

Reproduction of the problem
Rough repro @ https://stackblitz.com/edit/angular-eevppg

What is the motivation / use case for changing the behavior?
Ensuring the framework works as intended

Please tell us about your environment:
Windows 10, Webstorm, yarn, Angular CLI. Also reproducible in stackblitz ( see above )

• Table version: 0.8.x
  @swimlane/ngx-datatable@^11.1.7

• Angular version: 2.0.x
  "@angular/core@^5.1.3" (same for other packages)

• Browser:
  Chrome (latest), Edge (latest)

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  Typescript 2.5

[Fitkullin]

Bug Virtual scrollY (table 500 lines)


{{row.name}}

after scroll down routing stop working , ngOnInit hook never triggers

[molcik]

Same here. Any workaround?

[yusijs]

It seems to be related to zones. If you force the action to run within a zone, it works:

this.zone.run(() => this.navigate());

However, routerLinks etc wont work, and event emitters needs to be done within a function.

So if you did
(click)="select.emit(stuff)"
You now need to do
(click)="select(stuff)" in html, and
select(stuff) {
this.zone.run(() => this.selectEmitter.emit(stuff));
}

Apologies for shit formatting, on mobile :)

[molcik]

@yusijs THX man, you saved me 💯 .

[stas-kh]

The same here, thanks for the workaround but it would be nice to have it fixed

[sheiidan]

The zone issues might be related to this root cause:
https://github.com/swimlane/ngx-datatable/issues/1321#issuecomment-378011326

[deeg]

If anyone is interested to use a version with scrolling running in zone, you can replace your package.json:

"@swimlane/ngx-datatable": "semanticresearch/ngx-datatable#scroll-in-zone",

The only difference from release v13 is making scrolling happen inside zone:

https://github.com/semanticresearch/ngx-datatable/commits/scroll-in-zone

[deeg]

@marjan-georgiev, I believe this should be fixed and can be closed with #1375 which was just merged.