I'm currently integrating ngx-carousel into my application.
Interestingly, the carousel works perfectly when I manually input the data. However, when trying to fetch the data from the server, it fails to work as expected.
Take a look at my code snippet below:
this.contentfulService.getContent('ourSpecialties')
.then(ourSpecialties => {
this.ourSpecialties = ourSpecialties;
console.log(this.ourSpecialties);
});
HTML
<owl-carousel-o *ngIf="ourSpecialties" [options]="customOptions">
<ng-template *ngFor="let ourSpecialtie of ourSpecialties" carouselSlide>
<img src="{{ourSpecialtie.fields.image.fields.file.url}}">
<h3>{{ourSpecialtie.fields.title}}</h3>
<p>{{ourSpecialtie.fields.description}}</p>
</ng-template>
</owl-carousel-o>The data is successfully logged in the console for ourSpecialties.
Please advise on what could be causing the issue here?