I'm helping implement localization in an angular web application using a language switcher that I implemented using transloco. The way transloco works is that it adds the two digit language code /en/ right after the domain in the URL, and the end point and sub location just follows after the language code. This was the old code that worked fine before I implemented localization:

  <div class="navbar-brand">
    <ng-container *ngIf="sites$ | async as sites">
      <a [matMenuTriggerFor]="menu" href="javascript:void(0);">{{ siteName$ | async }}</a>
      <mat-menu #menu="matMenu">
        <button *ngIf="admin$ | async" mat-menu-item routerLink="admin">Admin</button>
        <button *ngFor="let site of sites" mat-menu-item [routerLink]="site.id">{{ site.name }}</button>
      </mat-menu>
    </ng-container>
  </div>

So in order to go to the right page as soon as the app loads, I had to change "admin" to "en/admin" instead. However site.id is a variable, so how do I pass in the string value inside site.id inside the router link value. This is what I tried, but it obviously doesn't work properly:

  <div class="navbar-brand">
    <ng-container *ngIf="sites$ | async as sites">
      <a [matMenuTriggerFor]="menu" href="javascript:void(0);">{{ siteName$ | async }}</a>
      <mat-menu #menu="matMenu">
        <button *ngIf="admin$ | async" mat-menu-item routerLink="en/admin">Admin</button>
        <button *ngFor="let site of sites" mat-menu-item [routerLink]="'en' + /site.id">{{ site.name }}</button>
      </mat-menu>
    </ng-container>
  </div>