horse.component.html 1.42 KB
Newer Older
1 2 3 4 5 6 7 8
<div *ngIf="error" class="alert alert-danger alert-dismissible fade show" role="alert">
  <strong>Error! </strong> {{ errorMessage }}
  <button type="button" (click)="vanishError()" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<div class="container mt-3" *ngIf="horse">
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
  <h1>Horse Info for {{ horse.name }}</h1>
  <hr>
  <div class="row">
    <img class="img-thumbnail float-left col-md-6" src="http://localhost:8080/horses/image/{{ horse.imagePath }}" *ngIf="horse.imagePath">
    <table class="table table-striped float-right col-md-6">
      <tbody>
        <tr>
          <th scope="row">Name</th>
          <td>{{ horse.name }}</td>
        </tr>
        <tr>
          <th scope="row">Owner</th>
          <td>
            <a href="owner/{{ horse.owner }}" *ngIf="horse.owner; else noOwner">{{ ownerName }}</a>
            <ng-template #noOwner> {{ ownerName }} </ng-template>
          </td>
        </tr>
        <tr>
          <th scope="row">Birthday</th>
          <td>{{ horse.birthday }}</td>
        </tr>
        <tr>
          <th scope="row">Race</th>
          <td>{{ horse.race }}</td>
        </tr>
        <tr>
          <th scope="row">Score</th>
          <td>{{ horse.score }}</td>
        </tr>
        <tr>
          <th scope="row">Description</th>
          <td>{{ horse.description }}</td>
        </tr>
      </tbody>
    </table>
44 45
  </div>
</div>