Ngx-datatable: Expression has changed after it was checked

[maxisam]

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

Current behavior
showing

error_handler.js:48 EXCEPTION: Error in ./DataTableBodyRowComponent class DataTableBodyRowComponent - inline template:6:6 caused by: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.

when I click on row to trigger a modal popup.

Expected behavior
should be no error. It was working fine on 0.11.2 until I updated it to latest.

Reproduction of the problem

I am still trying to reproduce the problem.

My case is like this plunker

However, it seems working fine there, but it doesn't work on my real project.

Any idea what update would cause this issue ?

[maxisam]

Ok, I finally figure it out. In above plunker
<template ngbModalContainer></template> is in the same template with datatable, but in my real project it is not.

In my real project, <template ngbModalContainer></template> is at the app component template and datatable is in another module that is loaded by router.

But I still don't understand why it worked fine in the 0.11.2 version.

[amcdnl]

Closing per comment above.

[maxisam]

ping @pkozlowski-opensource, in the end, the way I fixed this issue is adding multiple <template ngbModalContainer></template> to my project. In this case, I added another one to the template of that module that will be loaded with datatbale and modal.

[pkozlowski-opensource]

@maxisam not sure what the whole story is about but be sure to update to the latest ng-bootstrap as we've fixed a couple of issues with lazy loading recently. In the future we are going to drop <template ngbModalContainer></template> altogether but we need to wait for Angular 2.3 for this to happen.

[maxisam]

FYI, I was using alpha.11. It is like root module trying to load a feature module with datatable. And a button in datatable row will trigger and lazy load the modal module. It works fine if I put <template ngbModalContainer></template> in feature module or both feature module and root module. But it doesn't work if I just put it in root module. The weird thing is it was working until I updated datatable. So I report the issue here.

BTW, The example above is a working version that doesn't put <template ngbModalContainer></template> and modal into 2 different modules.

Anyway, I just wanna share this case with you, and maybe you might see something. And If we will drop <template ngbModalContainer></template>, the issue might just go away.

[pkozlowski-opensource]

@maxisam if you believe that there is an issue on the ng-bootstrap side than please isolate it and open an issue in our repo. But we will need a minimal (that is, without data table) repro.

[maxisam]

It is fine. I will wait for 2.3 and see if this issue is still there. I am sorta fine with my workaround.

[jntakpe]

Same problem with angular 2.4+ but working fine with Chrome.

Indeed adding <template ngbModalContainer></template> in feature module fixes the issue