Angular ngx-translate usage in typescript object array

Question

I am using ngx-translate for translation.

In my typescript file I have a array of objects. how can I use a i18n key in this array?

shortcutList: Shortcut[] = [];

constructor(private translate: TranslateService){}


 this.shortcutList = [
      { text: this.translate.get('shortcuts.some-key'), icon: 'fa-calendar-alt'},
      { text: this.translate.get('shortcuts.some-key2'), icon: 'fa-users'},
      { text: this.translate.get('shortcuts.some-key3'), icon:'fa-archway'}     
    ];

I need a simple answer. I can make separate variables and return the value with a observable but I think that's overkill. Is there a another solution?

also get will return a object iso a string. I can use .instant but than i will get the key and not the translation

json:

{
  "shortcuts": {
    "some-key": "some-value",
    "some-key2": "some-value2",
    "some-key3": "some-value3"
  }
}

Update: I created an resolver. Answer for this you can find here: ngx-translate .instant returns key instead of value

Now you can use:

{ text: this.translate.instant('shortcuts.some-key'), icon: 'fa-calendar-alt'},

But now only the first item will be translated. How can I fix this issue?

Update: I had a typo in my i18n file everything works now. The solution for my issue was create a resolver so that the file is loaded before loading the page so I can load the translations in a simple way in the object-array.

No, `instant` will return the value, not the key. Which one do you need exactly? — Aldin Bradaric, Dec 02 '21 at 14:11
Then `this.translate.instant('shortcuts.some-key')` will return the value stored in your json file. — Aldin Bradaric, Dec 02 '21 at 14:26
It would return the key if no value could be found or if the service hasn't been initialized yet. You could move your code into the `ngOnInit` hook and see if instant works there. If it doesn't, however, use `translate.get('key').subscribe(() => // ...)` and try that. — Aldin Bradaric, Dec 02 '21 at 14:37

Angular ngx-translate usage in typescript object array

0 Answers0