Unable to render content in Angular template

Question

I'm implementing ngx-carousel in my application.

When I hard code the data it is working fine. But with server data it is not working.

Below is my code.

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> 

I can see the data in console for ourSpecialties.

Let me know what I'm doing wrong here ?

Answer 1

*ngFor directive microsyntax is expanded into an outer <ng-template> tag. Probably the inner template isn't rendered. Try to wrap the *ngFor in a <ng-container> tag. Try the following

<owl-carousel-o *ngIf="ourSpecialties" [options]="customOptions">
  <ng-container *ngFor="let ourSpecialtie of ourSpecialties">
    <ng-template carouselSlide>
      <img src="{{ourSpecialtie.fields.image.fields.file.url}}">
      <h3>{{ourSpecialtie.fields.title}}</h3>
      <p>{{ourSpecialtie.fields.description}}</p>
    <ng-template>
  </ng-container>
</owl-carousel-o>