Ombi/src/Ombi/ClientApp/src/app/media-details/components/shared/cast-carousel/cast-carousel.component.html

<mat-card class="mat-elevation-z8  spacing-below">
    <mat-card-header>{{'MediaDetails.Casts.CastTitle' | translate}}</mat-card-header>
    <mat-card-content>
      <p-carousel [value]="cast" [numVisible]="5" easing="easeOutStrong">
        <ng-template let-item pTemplate="item">
          <div class="row justify-content-md-center mat-card mat-card-flat">
            <div class="col-12">
              <img class="cast-profile-img" *ngIf="item.profile_path" src="https://image.tmdb.org/t/p/w300/{{item.profile_path}}">
              <img class="cast-profile-img" *ngIf="item.character?.image?.medium" [src]="item.character.image.medium">
              <!-- TODO get profile image default -->
            </div>
            <div class="col-12">
              <span *ngIf="!item.character?.name"><strong>{{'MediaDetails.Casts.Character' | translate}}:</strong> {{item.character}}</span>
              <span *ngIf="item.character.name"><strong>{{'MediaDetails.Casts.Character' | translate}}:</strong> {{item.character.name}}</span>
            </div>
            <div class="col-12">
              <span *ngIf="item.name"><strong>{{'MediaDetails.Casts.Actor' | translate}}:</strong> {{item.name}}</span>
              <span *ngIf="item.person?.name"><strong>{{'MediaDetails.Casts.Actor' | translate}}:</strong> {{item.person.name}}</span>
            </div>
          </div>
        </ng-template>
      </p-carousel>
    </mat-card-content>
  </mat-card>