Menu item label translation not performed

Question

Given the following component

@Component({
  selector: 'sidebar-menu',
  templateUrl: './sidebar-menu.component.html',
  styleUrls: ['./sidebar-menu.component.scss'],
})
export class SidebarMenuComponent implements OnInit {
  userMenuItems: MenuItem[] = [];

  constructor(private readonly service: TranslateService) {}

  ngOnInit() {
    this.userMenuItems = [
      {
        label: this.service.instant('menu.sidebar.user.global-user-management'),
        routerLink: 'admin-users',
      },
      {
        label: this.service.instant('menu.sidebar.user.centre-user-management'),
        routerLink: '/',
      },
    ];
  }
}

I'm trying to get the labels of the menu items to be translated. But the above fails. What is the correct way for this translation to be applied?

Thanks in advance

Answer 1

The answer to this question is adequately answered in this publication. In summary. instant is synchronous and translations are not available. It is solved with .get

ngOnInit() {
    this.service
      .get([
        'menu.sidebar.user.global-user-management',
        'menu.sidebar.user.centre-user-management',
      ])
      .subscribe({
        next: () => {
          this.userMenuItems = [
            {
              label: this.service.instant(
                'menu.sidebar.user.global-user-management'
              ),
              routerLink: 'admin-users',
            },
            {
              label: this.service.instant(
                'menu.sidebar.user.centre-user-management'
              ),
              routerLink: '/',
            },
          ];
        },
      });
  }