Hello everyone,

I am trying to use the MDB carousel for a simple image slider in an angular project. All my images are within the apps asset folder, I set up an interface with the required parameters, grabbing my array from the json using the httpClient and did some basic configuration to get started.

*Expected behavior*when loading the page the slider should show the first image and show controls to move through the three images provided

*Actual behavior*when loading the page the slider shows up empty and logs an error (see below), as soon as I click on the next slide all the images show up and it works like a charm

Resources (screenshots, code snippets etc.) Error: ERROR Error: Uncaught (in promise): TypeError: Cannot set properties of undefined (setting 'active')TypeError: Cannot set properties of undefined (setting 'active') at MdbCarouselComponent.\_setActiveSlide (mdb-angular-ui-kit-carousel.mjs:162:9) at mdb-angular-ui-kit-carousel.mjs:137:18 at \_ZoneDelegate.invoke (zone.js:372:26) at Object.onInvoke (core.mjs:26231:33) at \_ZoneDelegate.invoke (zone.js:371:52) at Zone.run (zone.js:134:43) at zone.js:1275:36 at \_ZoneDelegate.invokeTask (zone.js:406:31) at Object.onInvokeTask (core.mjs:26218:33) at \_ZoneDelegate.invokeTask (zone.js:405:60) at resolvePromise (zone.js:1211:31) at zone.js:1282:17 at \_ZoneDelegate.invokeTask (zone.js:406:31) at Object.onInvokeTask (core.mjs:26218:33) at \_ZoneDelegate.invokeTask (zone.js:405:60) at Zone.runTask (zone.js:178:47) at drainMicroTaskQueue (zone.js:585:35)

this is my component template file, sliderArray is an array of objects with the required params

  <mdb-carousel [controls]="true" [indicators]="true" [animation]="'slide'" [interval]="0">
      <mdb-carousel-item *ngFor="let i of sliderArray">
        <img
          src="{{i.src}}"
          class="{{i.class}}"
        />
        <div class="carousel-caption d-none d-md-block">
          {{i.text}}
        </div>
      </mdb-carousel-item>
    </mdb-carousel>

What am I missing here?