Images do not load until mouseover of slide

[jbenhardus]

I added the carousel to my angular 8 app, and it works great, except I noticed that the images do not appear until I mouse over a slide. Instead it loads the carousel in the correct proportions with a blank slide, like this:

The rendered html looks like this:

Once I mouseover the the slide, the image and other content load and display properly. The code for the carousel I am using is as follows

<mat-carousel
timings="500ms ease-in"
[autoplay]="false"
color="primary"
maxWidth="auto"
[maintainAspectRatio]="false"
[slideHeight]="'500px'"
proportion="25"
slides="5"
[loop]="false"
[hideArrows]="false"
[hideIndicators]="false"
[useKeyboard]="true"
[useMouseWheel]="false"
orientation="ltr"

  <mat-carousel-slide [image]="'assets/images/screenshots/goals.png'" [hideOverlay]="true">
     <div class="slide-caption-container">
        <div class="slide-caption">
           <div class="slide-header">
              Goals
           </div>
           <div class="slide-description">
              Set a long term vision for your organization and track your progress.
           </div>
        </div>
     </div>
  </mat-carousel-slide>
  <mat-carousel-slide [image]="'assets/images/screenshots/rocks.png'" [hideOverlay]="true">
     <div class="slide-caption-container">
        <div class="slide-caption">
           <div class="slide-header">
              Rocks
           </div>
           <div class="slide-description">
              Bridge the gap between where you are and where you need to be. Rocks are targeted,
              90 day initiatives that focus departments towards improving in a specific,
              measureable manner.
           </div>
        </div>
     </div>
  </mat-carousel-slide>

Note: I do have a workaround for this. I discovered that forcing change detection in ngAfterViewInit caused the slides to display correctly. Ideally though, this should not be required.

[Wintermute79]

I had a similar issue. Triggering change detection fixed it for me:

Inject a ChangeDetectorRef in your constructor like so

constructor(
    private cd: ChangeDetectorRef
}

and then detect changes after view is initialized

ngAfterViewInit(): void {
    this.cd.detectChanges();
}