Scroll to an selected item in scrollable mat-table angular

So I have an angular mat-table with a max-height, so you can scroll in it.
There is also a radar with dots that you can click. It doesn't matter what the radar is doing, only the dots are important.

You can either click on an item in the mat-table and the specific dot gets red, or you can click on a dot and the item in the mat-table gets a background-color.
If a dot gets clicked and the corresponding item in mat-table isn't visible, it should scroll to that specific item in the mat-table.

Mat-table

Code of mat-table:

<mat-table #table [dataSource]="dataSource" class="mat-elevation-z8" *ngIf="!isLoading">
              <ng-container matColumnDef="name">
                <mat-cell 
                  *matCellDef="let law" (click)="onSelect(law)"
                  [ngClass]="{'highlight': selectedRowIndex == law.id}"
                  ><b>{{law.name}}</b>
                </mat-cell>
              </ng-container>
              <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

Also, the item which is selected gets the class highlight.

I'm getting the element with:

let element = this.elem.nativeElement.querySelectorAll('.highlight');

So I tried to scroll to it with:
element.scrollIntoView({block: 'center'});
and
element.prototype.scrollIntoView();
but neither of this is working.

Any ideas on how I can scroll to the specific item in the mat-table?

It's hard to say what's wrong with your code without you providing a stackblitz example of your issue.

Anyway, scrolling to a specific row should be easy.

In your template define an id on the row element. You can also style the whole row to highlight the selected row:

<tr mat-row 
    *matRowDef="let row; columns: displayedColumns;" [id]="row.position"
    [ngClass]="{'selected-row': row.position === selectedRowId}">
</tr>

In your typescript file, query the @ViewChildren of type MatRow:

@ViewChildren(MatRow, {read: ElementRef}) rows!: QueryList<ElementRef<HTMLTableRowElement>>;

This will find all elements with the MatRow directive and read their ElementRef, which allows you accessing the nativeElement.

Then you can scroll into specific row by looking up proper element based on it's id and calling scrollIntoView() on it:

private scrollToIndex(id: number): void {
    this.selectedRowId = id;
    let elem = this.rows.find(row => row.nativeElement.id === id.toString());

    elem?.nativeElement.scrollIntoView({block: 'center', behavior: 'smooth'});
}

Here's a working stackblitz. I've wrapped the table in a div with overflow-y: auto and max-width, but it's not necessary for it to work - it was only to force the scrollbar visibility on higher resolution displays.