How to pass a mixture of string and variable into routerLink for navigation?

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>


Edit: Adding information As you can see in the screenshot, when I tap on Site, it used to show Site before, but now it still displays Admin even though it navigates correctly. I tried what was recommended but it doesn't seem like it is fixing this issue

Continue reading...