Accessibility: Problem auto focusing on AG-Grid (inside Router-Outlet/Child Component) when navigating from App Component Menu Button - accessibility

Question

I have used several methods.
OnCellClicked in Ag-Grid has the functions:
var firstCol = params.columnApi.getAllDisplayedColumns()[0];
params.api.ensureColumnVisible(firstCol);
Also tried referencing the AG-Grid with a ViewComponent Tag with its ID
<ag-grid-angular #agGrid
style="height: 740px; width: 100%;"
class="ag-theme-balham"
multiSortKey="ctrl"
rowSelection="single"
rowModelType="serverSide"
[modules]="modules"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[rowData]="rowDataServerSide"
[animateRows]="true"
[getRowHeight]="getRowHeight"
[ensureDomOrder]="true"
[suppressColumnVirtualisation]="true"
[pagination]="true"
(modelUpdated)="onModelUpdated($event)"
[paginationPageSize]="paginationPageSize"
(firstDataRendered)="onFirstDataRendered($event)"
[enableCellChangeFlash]="true"
(gridReady)="onGridReady($event)"
(cellClicked)="onCellClicked($event)"
(cellKeyPress)="onCellKeyPress($event)"
[enableBrowserTooltips]="true"
[statusBar]="statusBar"
[frameworkComponents]="frameworkComponents"
(cellFocused)="onCellFocused($event)"
(cellKeyDown)="onCellKeyDown($event)"
[tabToNextCell]="onTabToNextCell"
[navigateToNextCell]="onNavigateToNextCell">
</ag-grid-angular>
#ViewChildren('agGrid')
public agGrid: any;
this.agGrid.first._nativeElement.focus();
Have also tried disabling [autofocus] on the button via html properties.
This does not work either. I read in an article that when you navigate from a menu button, it auto focuses the menu option button. How do I get Angular to focus on the agGrid which is located inside the router-outlet after clicking a menu button and navigating to the ag-grid component?
<mat-sidenav-container *ngIf="!centurionPreview" class="sidenav-container">
<mat-sidenav #drawer class="sideNav" fixedInViewport *ngIf="(isHandset$ | async)"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="(isHandset$ | async) === false"
(click)="toggleSidenav()">
<mat-toolbar>Menu</mat-toolbar>
<mat-nav-list #sideMenu class="side_menu">
<button
[disabled]="!navPerms.Library.functional"
[hidden]="!navPerms.Library.enabled"
[matMenuTriggerFor]="library"
mat-button>Library</button>
<mat-menu #library="matMenu">
<button *ngFor="let item of navPerms.Library.children"
[attr.aria-label]="getName(item.id) + 'Button'"
[hidden]="!item.functional || !item.enabled"
[disabled]="!item.functional || !item.enabled"
(click)="goToEntityPage(item.id)"
mat-menu-item>{{getName(item.id)}}
</button>
</mat-menu>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar>
<button type="button" (click)="toggleSidenav()"
*ngIf="currentUser && (isHandset$ | async)">
<mat-icon aria-label="Side Navigation Toggle Icon">Menu</mat-icon>
</button>
<div *ngIf="currentUser && !(isHandset$ | async)">
<button
[disabled]="!navPerms.Library.functional"
[hidden]="!navPerms.Library.enabled"
[matMenuTriggerFor]="libraryMenu"
mat-button>Library</button>
<mat-menu #libraryMenu="matMenu">
<button *ngFor="let item of navPerms.Library.children"
[attr.aria-label]="getName(item.id) + 'Button'"
[hidden]="!item.functional || !item.enabled"
[disabled]="!item.functional || !item.enabled"
(click)="goToEntityPage(item.id)"
mat-menu-item>{{getName(item.id)}}
</button>
</mat-menu>
</mat-toolbar>
</mat-sidenav-content>
</mat-sidenav-container>
<!-- Add Content Here -->
<div #mainContent style="height:88%;width:100%;">
<router-outlet></router-outlet>
</div>