MDB Carousel OnPush Problem


Topic: MDB Carousel OnPush Problem

bidwej asked a week ago

Dear Support,

Do you think you may be able to support "ChangeDetectionStrategy.OnPush" for the carousel component?

I see a mention of "ChangeDetectionStrategy" within "mdb-angular-ui-kit-carousel.metadata.json" but I am not sure how to enable this feature.

Here is a discussion on the topic from two years ago for reference. https://mdbootstrap.com/support/angular/mdb-carousel-problems/

Expected behavior The carousel should trigger "this.cdRef.markForCheck();" after an image is loaded.

Actual behavior Instead, images remain blank until a mouse over event triggers a re-draw.

Resources (screenshots, code snippets etc.)


Arkadiusz Idzikowski staff commented a week ago

@bidwej In the specification of this issue you mentioned MDB5 1.3.0 version but the old support thread is from MDB4 Angular support. Do you use MDB4 Angular (angular-bootstrap-md or ng-ui-kit-pro-standard) or MDB5 Angular (mdb-angular-ui-kit)?.

Could you please provide more details about the code you used? Did you just add the carousel component inside a component with OnPush strategy or do you load/change something dynamically after the component is rendered?


bidwej commented a week ago

Thank you for the follow-up. Yes. My carousel component is inside a component with "OnPush" strategy. I am using sample data that I set within "ngOnInit". Everything works when I am not using "OnPush". Images set using "src" only refresh when I mouse over the component. If the source code is available perhaps we could check to see 1) carousel is using the "OnPush" strategy and if so 2) whether "markForCheck" is being called within the carousel's "ngOnChanges" function. What do you think?


Arkadiusz Idzikowski staff commented a week ago

@bidwej Thank you for the detailed description. The solutions you suggested are probably correct, we will take a closer look at this component and make some additional tests to make sure this strategy is fully supported.

Could you also confirm which product/version do you use?


Please insert min. 20 characters.
Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB5 1.3.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes