Hi:

I have a component where I need to highlight the subject item with many details, below it a carousel of comparable items in cards with few (the most important features) details of the comparable item. It behaves weirdly in many ways, is breaks responsiveness in sm-down media queries showing all three cards one below the other, it doesn't slide correctly.

Sliding consists of sliding old content out of the view element and sliding the new content into the view in the direction contrary of the arrow clicked. Well, it is only showing new content sliding in but first it clears out current content and therefore it can't slide out.

It also requires two clicks to make the move and about 1 second later it slides again in the same direction by itself.

If I take my mouse cursor out of the window it doesn't slide at all, it clears the content and flashy presents the new one but without animation.

ChangeDetectionStrategy.OnPush causes it. If I remove it or simply configure it to ChangeDetectionStrategy.Default it starts working normally. I am wondering if there is something I can do to overcome this situation since my application is getting big and now is feature-oriented state managed and to put it more real I can dare to say it is 90% state driven so it is not an option to work without OnPush.

To reproduce the issue generate it with:

ng g component Comparables -ve=none --changeDetection=OnPush

Then copy any slider from mdb bootstrap code samples, even testimonials' slider, any, the result will be the same.

Furthermore, I also tried using this component with ChangeDetectionStrategy.Default with an input variable with my array of cards and wrapping it inside a parent component that have ChangeDetectionStrategy.OnPush and it didn't work either.