Carousel: animations do not transition properly when ChangeDetectionStrategy.OnPush

[RivaIvanova]

Description

When a carousel is defined with an interval, so it auto rotates and placed inside a parent with ChangeDetectionStrategy.OnPush, the animations do not transition properly.

• igniteui-angular version: 18.2.x, 19.1.x, master
• browser: any

Steps to reproduce

1. Create a component with ChangeDetectionStrategy.OnPush and add a carousel with an interval set.
2. Observe the animation transition. Test with all animations - none, slide, fade.

<igx-carousel [interval]="3000" [pause]="false">
  <igx-slide>
    <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/WonderfulCoast.png" />
  </igx-slide>
  <igx-slide>
    <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/GoldenBeaches.png" />
  </igx-slide>
  <igx-slide>
    <img src="https://www.infragistics.com/angular-demos-lob/assets/images/carousel/IslandOfHistory.png" />
  </igx-slide>
</igx-carousel>

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IGX_CAROUSEL_DIRECTIVES } from '@infragistics/igniteui-angular';

@Component({
  selector: 'app-my-carousel',
  imports: [IGX_CAROUSEL_DIRECTIVES],
  templateUrl: './my-carousel.component.html',
  styleUrl: './my-carousel.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MyCarouselComponent { }

Result

Expected result

The animations should transition smoothly.