Angular 7 scroll horizontal table via button press

Question

I have this table that is responsive, which is just a bootstrap responsive table. It looks like this:

<div class="table-responsive" *ngIf="rows">
  <table class="table table-borderliness table-product">
    <tbody>
      <ng-container *ngFor="let row of rows">
        <tr class="d-flex">
          <td class="d-flex align-items-center justify-content-center col" [class.table-active-primary]="column.class"
            *ngFor="let column of row.columns; let i = index" [scope]="i ? '' : 'row'">
            <div [ngSwitch]="row.description.length && !i">
              <span *ngSwitchCase="0">{{ column.name }}</span>
              <span *ngSwitchDefault>
                <button class="btn btn-link btn-block" (click)="showDescription(column.name, row)">
                  <span class="float-left">{{ column.name }}</span>
                  <fa-icon class="float-right" [icon]="['far', 'plus-square']" *ngIf="row.state === 'out'">
                  </fa-icon>
                  <fa-icon class="float-right" [icon]="['far', 'minus-square']" *ngIf="row.state === 'in'">
                  </fa-icon>
                </button>
              </span>
            </div>
          </td>
        </tr>
        <tr class="d-flex descriptions" [@animateRow]="row.state">
          <td class="col" scope="row" [innerHtml]="row.description"
            *ngIf="row.description && descriptions.indexOf(row.columns[0].name) > -1"></td>
        </tr>
      </ng-container>
    </tbody>
  </table>
</div>

Then above this I have a title with some buttons:

<div class="col">
  <h1 class="float-left">How they compare</h1>
  <div class="btn-group" role="group" aria-label="Basic example">
    <button class="btn btn-link btn-lg" (click)="scrollLeft()">
      <fa-icon [icon]="['far', 'caret-square-left']"></fa-icon>
    </button>
    <button class="btn btn-link btn-lg" (click)="scrollRight()">
      <fa-icon [icon]="['far', 'caret-square-right']"></fa-icon>
    </button>
  </div>
</div>

What I want to do, is to get the left button to scroll the table horizontally left (and disable when we are right at the beginning) and the right button to scroll right (and disable when we are at the end).

I have no idea how to do this in Angular; in AngularJs I would be able to ;) Can anyone help?

---

After a bit of research I have found that I can use @ViewChild to target my table, so I have done this:

@ViewChild('productTable') productTable;

scrollLeft(): void {
  if (!this.productTable.nativeElement) return;
  this.productTable.nativeElement.scrollLeft -= 10;
}

scrollRight(): void {
  if (!this.productTable.nativeElement) return;
  this.productTable.nativeElement.scrollLeft += 10;
}

This sort of works, but I think I need to change it from click to mousedown :) perhaps see if it is jerky or smooth