How to get scoped values in the Transloco Translate API

1.1k Views Asked by At

I am trying to find the syntax for getting translation values from a scoped object.

I would like to get the translation text for the key "title".

file: en.json

{
  "foo": "Foo",
  "bar": "Bar",
  "dashboard": {
     "title": "Dashboard Title",
     "desc": "Dashboard Desc"
  }
}

const title = this.translocoService.translate('dashboard.title'); // not working

This is my component

import {TRANSLOCO_SCOPE, TranslocoService} from "@ngneat/transloco";

@Component({
  // tslint:disable-next-line:component-selector
  selector: "guest-register",
  templateUrl: "./register.component.html",
  styleUrls: ["./register.component.scss"],
  providers: [
    {
      provide: TRANSLOCO_SCOPE,
      useValue: {scope: 'dashboard', alias: 'dashboard'}
    }
  ],
  animations: [
    trigger("showNameState", [
      transition("void => *", [
        style({transform: "translateY(-100%)"}),
        animate(300)
      ])
    ])
  ]
})

I have read about scopes but is that the only way to get the the nested value?

In a template I can use this syntax

<div class="ui-g" *transloco="let t; read: 'guest-register'">

So there must be a similar syntax for the translation api.

0

There are 0 best solutions below