Swiper No Swiping - css

Question

SwiperNoSwiping.mov
https://swiperjs.com/
I am having some trouble using Swiper. When I load in raw data to Swipe, the component swipes. However, if I were to pull data from an API, the component does not swipe until there is a change in the view: such as if I were to change the size of the window or click Inspect element. I cannot figure out has to do with the event loop and the view or if it is something to do with CSS.
I have provided a link to the video in order for you to see what I am saying.
My code:
event.component.html
<swiper fxFlex="auto" [config]="config">
<div *ngFor="let event of totalEvents" class="swiper-slide cursor-pointer">
<div fxLayout="column" fxLayoutAlign="center center" fxFlexFill class="mx-2">
<!-- Your content goes here -->
<mat-card class="example-card">
<mat-card-header>
<img src="{{event.image}}" style="max-width:30%;max-height:35%;">
<mat-card-title>{{event.eventName}}</mat-card-title>
<mat-card-subtitle>{{event.startDate}}</mat-card-subtitle>
<mat-card-subtitle>{{event.venue}} <br>
{{event.location}}</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p>{{event.promoter}}</p>
<p>{{event.info}}</p>
<hr>
<p>$ {{event.price}}</p>
<button *ngIf="event.url"mat-raised-button color="basic">
Buy Ticket
</button>
</mat-card-content>
</mat-card>
</div>
</div>
</swiper>
<swiper fxFlex="auto" [config]="config">
<div *ngFor="let step of something" class="swiper-slide cursor-pointer">
<div fxLayout="column" fxLayoutAlign="center center" fxFlexFill class="mx-2">
<!-- Your content goes here -->
<mat-card class="example-card">
<mat-card-header>
<div mat-card-avatar class="example-header-image"></div>
<mat-card-title>{{step.name}}</mat-card-title>
</mat-card-header>
<mat-card-content>
<p>
The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
bred for hunting.
</p>
</mat-card-content>
</mat-card>
</div>
</div>
</swiper>
event.component.ts
totalEvents: any = [];
something = [{
name: 'Test1'
},
{
name: 'Test2'
}
];
/* cardSwipe */
index;
config: SwiperConfigInterface = {
effect: 'slide',
a11y: true,
direction: 'horizontal',
slidesPerView: 3,
slideToClickedSlide: true,
mousewheel: true,
scrollbar: true,
watchSlidesProgress: true,
navigation: true,
keyboard: true,
pagination: false,
centeredSlides: true,
loop: true,
roundLengths: true,
slidesOffsetBefore: 100,
slidesOffsetAfter: 100,
spaceBetween: 50,
breakpoints: {
// when window width is >= 320px
320: {
slidesPerView: 1
}
}
};
ngOnInit() {
this.fetchEvents();
}