0

Current behavior

I have created a ngx-datatable with one column that has a button inside of it. this button click works fine when i load the route with the datatable. What this button does is route to another "Detail page" of the clicked element.

But when I load the same route and scroll first through the datatable and afterwards click the same button it doesn't work anymore. The route doesn't change. But when i click the browser previous button and afterwards the forward button, the "DetailPage" is shown.

Images & code

So the first image shows the freshly loaded component with the ngx-datatable. When i click the button (marked) in red, the router routs to another page and works fine (see image 2).

Freshly loaded component

Result without scrolling

However when i re-run the application and scroll down a bit after the component is loaded (see image 3). The same button doesnt work anymore, but if I do the trick mentioned above (first click previous and then forward in browser navigation) it does load the wanted route.

Freshly loaded component and scrolled Result I get when I click after I scroll

Method that is executed on the button Click:

goToDetailOfWearable(wearable: ResultWearable) {
this.resultService.sendResultWearableToService(wearable);
this.router.navigateByUrl('Home/ProcessCategory/Processes/Activities/Result/Details'); }

wearable parameter is the row, the first line sends this row to the service and the second line routes to the "Detail Page"

Kerim Çevik
  • 67
  • 1
  • 3
  • 9

1 Answers1

0

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

this.zone.run(() => this.router.navigateByUrl('Home/ProcessCategory/Processes/Activities/Result/Details'); });
aider
  • 1