Virtual scroll causes issues with auxilary (named) routes

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

[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 😃

[Fitkullin]

Bug Virtual scrollY (table 500 lines) <ngx-datatable-column name=“Name” [flexGrow]=“3” [minWidth]=“200”> <ng-template let-value="value" let-row="row" ngx-datatable-cell-template> <a class=“table-link” [routerLink]=“[‘/app’, ‘hr’, ‘employees’, row.id]”>{{row.name}} </ng-template> </ngx-datatable-column>

after scroll down routing stop working , ngOnInit hook never triggers