Translate variable value with ngx-translate

Question

Need help with ngx-translate In component html there is

{{data.value | translate}}

In ts

data = {value: 'foo.bar'}

In i18n en.json

"foo": {
    "bar": "hello"
}

Instead of "hello" I'm getting "foo.bar" in the view.

Answer 1

If you want to use directly in Html then do as below

{{'foo.bar' | translate}}

refer below link and see how <h2>{{ 'HOME.TITLE' | translate }}</h2> is translated

https://stackblitz.com/github/ngx-translate/example?file=src%2Fapp%2Fapp.component.ts

If you want to have translations for variables in TS then use can use translate.get and translate.stream methods as below

in TS:

let value = translate.get('foo.bar').subscribe((res: string) => {
    return res;
});

in Html

{{value}}