IVY: Datepicker change detection does not update immediately when IVY is enabled

stevethemacguy commented 4 years ago

Bug description:

When IVY is enabled, if I dynamically add a CSS class to a custom dayTemplate (i.e. ng-template), the class is not added in the HTML until I trigger change detection on the datepicker in some other way (e.g. hovering over the calendar).

Expected Behavior: Adding a class to the datepicker's ng-template (i.e. custom day) should update the HTML immediately.

Actual Behavior (if IVY is enabled): The class is not added to the HTML until you hover over the calendar a second time (i.e. the change detection does not update immediately).

How to Reproduce Please see the instructions on StackBlitz. The datepicker uses two separate date ranges: a primary range (blue) and a secondary range (orange). Clicking a toggle button turns the secondary date range on and off. You can ignore the TS code related to the date ranges. Toggling the CSS class ON/OFF with the switch is the only part that is broken.

When IVY is disabled, the datepicker works properly, so I recommend trying the app with IVY disabled first. Once you're familiar with the expected behavior, the bug will be easy to spot when IVY is enabled.

Link to minimally-working StackBlitz that reproduces the issue:

https://stackblitz.com/edit/ng-bootstrap-change-detection-bug

Per @maxokorokov's recommendation, I also created a minimal example on https://ng-run.com to make building with IVY easier, but I'm not sure how to share that project.

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 9.0.2

ng-bootstrap: 6.0.0

Bootstrap: N/A

peterblazejewicz commented 4 years ago

Does it looks like Ivy related problem?: angular/angular#35400 (Ivy: ChangeDetection not running on transplanted views)

maxokorokov commented 4 years ago

Indeed looks like an Angular issue in question to me too

kamilchlebek commented 4 years ago

Angular team fixed the issue. It was released in v9.1.5 yesterday :rocket:

ng-bootstrap / ng-bootstrap