routerLink on button isn't routing me to the page

Question

I've done this hundreds of times before, yet I'm doing something wrong this time and I can't pinpoint what. I've encountered this issue whilst reworking my whole navigation.

Manually routing by hand does work. The problem doesn't have to do with the routing setup, but only with this component because other components do work. I also didn't do any changes to my routing since reworking my components (before it wasn't this dynamic).

Whenever I click on any routing in this component, it just stays on the same page and doesn't do anything visually (not even reloading or scrolling up).

I feel like I'm missing something obvious

My code

<div>
  <button color="primary" type="menu" mat-raised-button [matMenuTriggerFor]="routingMenu">
    <ng-container *ngFor="let screenType of ['mobile', 'desktop']">
      <mat-icon
        [attr.class]="screenType"
        [attr.inline]="screenType === 'desktop' ? true : false"
        >videogame_asset</mat-icon
      >
    </ng-container>
  </button>
  <mat-menu #routingMenu="matMenu">
    <ng-container *ngFor="let gmi of gameMenuItems">
      <button
        *ngIf="gmi.isVisible"
        type="menu"
        mat-menu-item
        [routerLink]="gmi.routerLink"
        (click)="gmi.onClick"
      >
        <mat-icon>{{ gmi.icon }}</mat-icon>
        <span>{{ gmi.name | translate }}</span>
      </button>
    </ng-container>
    <mat-divider></mat-divider>
    <button
      *ngFor="let mi of menuItems"
      type="menu"
      mat-menu-item
      [routerLink]="mi.routerLink"
    >
      <mat-icon>{{ mi.icon }}</mat-icon>
      <span
      [class]="currentPage === mi.routerLink ? 'current': ''">{{ mi.name | translate }}</span>
    </button>
  </mat-menu>
</div>

...
  get menuItems(): IMenuItem[] {
    return [
      {
        icon: "view_list",
        name: "Menu.UPCOMING_FEATURES",
        routerLink: ["/upcoming-features"],
      },
      {
        icon: "security",
        name: "Menu.PRIVACY_POLICY",
        routerLink: ["/privacy-policy"],
      },
    ];
  }
...

What I tried

• getting rid of (click) on button because I thought these couldn't be combined, but that didn't fix it.
• replace [routerLink] by [attr.routerLink]
• replace [routerLink]="gmi.routerLink" by static example like routerLink="/privacy-policy"

How the generated HTML looks like

<button
  _ngcontent-jyv-c138=""
  type="menu"
  mat-menu-item=""
  class="mat-focus-indicator mat-menu-item ng-star-inserted"
  tabindex="0"
  ng-reflect-router-link="/upcoming-features"
  role="menuitem"
  aria-disabled="false"
  style=""
>
  <mat-icon
    _ngcontent-jyv-c138=""
    role="img"
    class="mat-icon notranslate material-icons mat-icon-no-color"
    aria-hidden="true"
    >view_list</mat-icon
  ><span _ngcontent-jyv-c138="">Upcoming features</span>
  <div
    matripple=""
    class="mat-ripple mat-menu-ripple"
    ng-reflect-disabled="false"
    ng-reflect-trigger="[object HTMLButtonElement]"
  ></div>
</button>

Answer 1

Took a short break, grabbed a bite and found the solution.

I had to replace my get properties (for my menu items) by a normal (readonly) property. This way it doesn't execute the get constantly.

I'm still not sure how this interefered, yet it worked. So I'm still open to answer on why this works.

  readonly menuItems: IMenuItem[] =
    [
      {
        icon: "view_list",
        name: "Menu.UPCOMING_FEATURES",
        routerLink: ["/upcoming-features"],
      },
      {
        icon: "security",
        name: "Menu.PRIVACY_POLICY",
        routerLink: ["/privacy-policy"],
      },
    ];