Translate do Angular

Front-end
#1

Olá caros! Estou com esta atividade de traduzir o site usando a bibliotecla ngx-translate. Já funciona para muitos casos. Minha dificuldade é dentro de um *ngFor. Isto abaixo não funciona (parte do html):

<mat-list-item *ngFor="let menuItem of menuElements">
  <div *hasPermissao="menuItem.permissao">
    <button class="mb-2 btn-menu" mat-button [routerLink]="[menuItem.url]" *ngIf="!menuItem.elements; else subLista">
      <mat-icon class="mr-2 ml-2">{{ menuItem.icon }}</mat-icon>
      <span class="mat-subheading-1">{{  'TRADUCAO' | translate: values.menuPrincipal.menuItem.title }}</span>                      
    </button>

sem a tradução funciona assim:

<span class="mat-subheading-1">{{ menuItem.title }}</span>

Alguma sugestão?

#2

De onde está vindo esse values?

#3

de uma arquivo JSON que criei junto ao component (gerenciador-contexto-values.ts)


"menuPrincipal": {
administracao: {
pt: "Administração",
en: "Administration",
es: "Gestión"
},

o arquivo é maior, coloquei só uma parte