source: trip-planner-front/src/app/location/location.component.html

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
  integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<p-toast></p-toast>
<h3>Here are all locations</h3>
<button pButton pRipple type="button" icon="pi pi-bell" class="p-button-rounded p-button-warning"
  label="Back to my Planners" (click)="onClickBackToMyPlanners()"></button>
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Photo</th>
      <th scope="col">Location name</th>
      <th scope="col"> Add to my planner</th>
      <th scope="col">See details </th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let location of listLocations">
      <td>{{location.id}}</td>
      <td><img src="data:image/png;base64,{{location.photo}}" /></td>
      <td>{{location.name}}</td>
      <td><button type="button" (click)="show(location)" pButton icon="pi pi-info-circle"
          label="Add to my planner"></button></td>
      <td><button type="button" color="primary" pButton icon="pi pi-info-circle"
          (click)="onClickSeeDetails(location.id)" label="See details"></button>
      </td>
    </tr>
  </tbody>
</table>