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

<h3>Here are all locations</h3>

<table class="table" >
  <thead>
    <tr>
      <th scope="col">#</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>{{location.name}}</td>
      <td><button mat-raised-button color="primary" (click)="openDialogSave(location.id)">Add to my planner</button></td>
      <td><button mat-raised-button color="primary" (click)="onClickSeeDetails(location.id)">See details</button></td>
    </tr>  
  </tbody>
</table>