ExpressionChangedAfterItHasBeenCheckedError when showZoom=true

[muddymudskipper]

I am using Angular 9 and when I set showZoom=true, either in the constructor or when opening a lightbox, I get a ExpressionChangedAfterItHasBeenCheckedError. I tried calling changeDetectorRef.detectChanges() after opening the lightbox, but it doesn't help. Am I missing something?

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'hidden: true'. Current value: 'hidden: false'. Angular 7 View_LightboxComponent_0 lightbox.component.d.ts.LightboxComponent.html:29 Angular 17 RxJS 5 Angular 9 lightbox.component.d.ts.LightboxComponent.html:29:10

[RabidArts]

I'm getting the same issue, triggered by the showRotateButton option which is thrown by this line in LightboxComponent.html : <div class="lb-turnContainer" [hidden]="!ui.showRotateButton">

The issue is that the component internally is attempting to make a change to the model that affects the view but during the view generation process. When this happens, angular doesn't know what value should be displayed (original or changed).

The problematic line is 444 of lightbox.component.ts, within _prepareComponent(), which is called by ngAfterViewInit this.ui.showRotateButton = this.options.showRotate;

A possible (untested) solution is to delay the setting of showRotateButton and showZoomButton using e.g. (yuck) setTimeout(0). Not sure of another way - I leave it to the component author (themyth92 ?) to determine the best solution :)

[themyth92]

@RabidArts can create a PR ? I will be happily to merge it. I am very busy nowadays so I will not have time to look at issues

[RabidArts]

@themyth92 Sure, happy to help fix this :)

[muddymudskipper]

It works now, thanks for the fix.