Automatically scroll to the selected row in the Angular mat-table

Question

I have a problem related with mat-table. My table consists of hundreds of rows, and logs that are displayed on the table are also displayed on the map (other component). If the user clicks on the row in the table, then the selected element's icon on the map changes. Also the selected row in the table is being highlighted. However - and this is the point where I am really stuck - user can also click on the map and the row in the table will be highlighted as well. But the problem is that it may as well be 100th row from the top of the table and we wouldn't know it. So my question is - is it possible to automatically scroll to the highlighted row when user clicks on the icon on the map?

This is the code for my table

<table
      mat-table
          [dataSource]="coolerDataSource"
          cdkDropListLockAxis="x"
          cdkDropList
          cdkDropListOrientation="horizontal"
          (cdkDropListDropped)="drop($event)"
          #sort1="matSort"
          matSort
        >
          <ng-container matColumnDef="door_status">
            <th
              class="cooler--table--wrapper--table--header"
              mat-header-cell
              *matHeaderCellDef
              cdkDrag
              mat-sort-header
            >
              {{ "COOLERS.DOOR_STATUS" | translate }}
            </th>
            <td
              class="cooler--table--wrapper--table--cell"
              mat-cell
              *matCellDef="let element"
            >
              {{ element.door_status }}
            </td>
          </ng-container>

          <ng-container matColumnDef="sentry_alarm_state">
            <th
              class="cooler--table--wrapper--table--header"
              mat-header-cell
              *matHeaderCellDef
              cdkDrag
              mat-sort-header
            >
              {{ "COOLERS.SENTRY_ALARM_STATE" | translate }}
            </th>
            <td
              class="cooler--table--wrapper--table--cell"
              mat-cell
              *matCellDef="let element"
            >
              {{ element.sentry_alarm_state }}
            </td>
          </ng-container>

          <tr
            class="cooler--table--wrapper--table--head"
            mat-header-row
            *matHeaderRowDef="activeTableColumns; sticky: true"
          ></tr>
          <tr
            mat-row
            *matRowDef="let trailerLog; columns: activeTableColumns"
            (click)="selectTrailerLog(trailerLog.id)"
            [ngClass]="{
              'cooler--table--wrapper--table--selected':
                trailerLog.id === (selectedTrailerLogId$ | async),
              'cooler--table--wrapper--table--unselected':
                trailerLog.id !== (selectedTrailerLogId$ | async)
            }"
         ></tr>
</table>

So as you can see the row is being highlighted based on the id of the element. Thanks in advance for your help!