CODEWITHSUNDEEP
angulartypescriptngx-translate
TheKeymaster
TheKeymaster

Reputation: 897

ngx-translate - Translating keys without component in TypeScript file

I am using Angular with the @ngx-translate module. I have the following file (just declaring some consts):

// some.module.ts

const const1 = [
  {
    url: 'google.com',
  },
  {
    url: 'google.de',
  },
  {
    url: 'google.at',
  },
];

const someOtherConst = [
  {
    text: 'please.translate.me', // <== Should be translated
  },
];

Basically I want to translate the value of the key text inside of the constant someOtherConstant, but I do not know how.

This seems like such a simple task, but I can not seem to figure out how.

Upvotes: 4

Views: 5151

Answers (2)

Suman Sen
Suman Sen

Reputation: 11

Just put the keys of your translation JSON file (Ex. en.json) as the values of the constant and use translate pipe in your component to get the translation. Example given below:

// Your separate const file

export const textContent = [
  { name: CONSTANT_VALUE.title1, data: CONSTANT_VALUE.description1},
  { name: CONSTANT_VALUE.title2, data: CONSTANT_VALUE.description2}
]


//In your JSON

{ 
"CONSTANT_VALUE" : {
  "title1": "John", 
  "description1": "Eats apple",
  "title2": "Sam", 
  "description2": "Eats ice-cream"
 }
}


//In your component template

<div *ngFor="let content of textContent">
  <h4>{{content.name | translate}}</h4>
  <p>{{content.data | translate}}</p>
</div>

Upvotes: 1

Aleš Doganoc
Aleš Doganoc

Reputation: 12052

You cannot do it in the way you want. The whole point of having a translation service is that you can also switch the language dynamically so you cannot populate constant values with translations. You need to apply the translation where you use the constant. In the end you probably want display the values somewhere.

If you want to display the value in a component you can expose the constant as a property and then translate in the template.

A simple component:

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html' 
})
export class AppComponent {
  public get textToTranslate() {
    return someOtherConst[0].text;
  }
}

The component template that translates it:

<h3>{{ textToTranslate | translate }}</h3>

If you need the translation in code you need translate it inside a service or component where you can inject the TranslateService and use any of the methods to get the translation depending on what you need.

Here is a service with the three possible ways to get the translation:

@Injectable()
export class ServiceWithTranslations {
  constructor(public translateService: TranslateService) {
    // get text with current language
    this.translateService.get(someOtherConst[0].text).subscribe((translatedText => {
      console.log(translatedText);
    }));
    // gets translation and emits new value if language changes
    this.translateService.stream(someOtherConst[0].text).subscribe((translatedText => {
      console.log(translatedText);
    }));
    // gets translation with current language you need to be sure translations are already loaded so it is not reccomended
    const translatedText = this.translate.instant(someOtherConst[0].text);
    console.log(translatedText);
  }
}

The closest option to what I think you want would be to create a service that would prepare the translations and then inject this service in the component or service you need the translations.

Here is a basic example of such a service:

@Injectable()
export class TranslationsService {
  public translatedConsts = [];

  constructor(private translateService: TranslateService) {
    for (const textEntry of someOtherConst) {
      const translatedConst = {
        text: ''
      };
      this.translateService.stream(textEntry.text).subscribe((translatedText) => {
        translatedConst.text = translatedText
      });
      this.translatedConsts.push(translatedConst);
    }
  }
}

Upvotes: 2

Related Questions