exercise-card.component.html

<div *ngIf="exercise" style="height: 100%">
  <div class="card">
    <div class="card-body" style="display: flex; flex-direction: column">
      <img
        class="card-img-top"
        src="{{ exercise.imageURL }}"
        (error)="correctImageURL($event)"
        alt="exercise image"
        style="
          width: auto;
          max-width: 100%;
          max-height: 70px;
          margin-left: auto;
          margin-right: auto;
          margin-bottom: 20px;
          margin-top: 5px;
          box-shadow: 3px;
        "
      />
      <h5 class="card-title">{{ exercise.title }}</h5>
      <p class="card-text" style="text-align: left">{{ exercise.description }}</p>

      <div style="margin-top: auto; width: 100%; padding-left: 30px; padding-right: 30px">
        <!-- card rating-->
        <div style="margin-bottom: 20px">
          <div style="float: left">
            <p class="card-text" jhiTranslate="exercise.details.rating"></p>
          </div>
          <div class="star-container">
            <span
              class="star"
              *ngFor="let starNumber of [1, 2, 3, 4, 5]"
              [ngClass]="{ 'star-marked': exercise.rating >= starNumber, 'star-unmarked': exercise.rating < starNumber }"
            >
            </span>
          </div>
        </div>
        <!-- card rating end-->

        <!-- card bookmark-->
        <div style="float: left; width: 100%">
          <div style="float: left">
            <p class="card-text" jhiTranslate="exercise.details.bookmark"></p>
          </div>
          <div class="form-check" style="float: right; padding-right: 10px">
            <input
              class="form-check-input"
              type="checkbox"
              [checked]="isOnCurrentWatchlist(exercise)"
              id="card-defaultCheck1"
              (change)="handleForCurrentWatchlist(exercise)"
            />
            <label class="form-check-label" for="card-defaultCheck1"></label>
          </div>
        </div>
        <!-- card bookmark end-->

        <!-- Button to Open the Modal -->
        <button
          type="button"
          class="btn btn-outline-secondary"
          style="margin-top: 20px"
          data-toggle="modal"
          data-target="#myModal"
          (click)="selectExercise()"
          jhiTranslate="exercise.more"
        ></button>
      </div>
    </div>
  </div>
</div>