2

I am trying to use ngx-translate library to implement the translations functionality in angular 4 application. Here I am trying to use the TranslateService which gets injected into a global service used across the application. This global service is invoked used in utility file (contains all common functionalities). Finally the utility method is invoked at component level. Here goes the overall diagram of usage:

enter image description here

I have also created a sample application at: https://stackblitz.com/edit/angular-6vlspz

Can anyone help me here with some code sample to implement it.

Improve this question

1 Answer 1

Reset to default
1

From your example, a few things to do:

  • Make moreText on testService an observable of text. I think the best thing would be a BehaviorSubject.
  • Subscribe to language changes there, and update the more text observable.
  • Use this observable in your components.

I get the idea of adding Accept-Language headers in the interceptor. Why do you need the actual translated values abstracted away from? Just use it directly in the components:

<span>Something something {{ 'moreText' | translate }} </span>

You don't need to pass the labels around in a service.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks very much Zlatko for your quick and detailed response. In this case I have method: moreTextContent in the test.model.ts file which is used across one of the view associated with a component via the testService class
I tried but not working for me. Can you please help me here with some code sample.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.