My template header component has a service for translations stored in local storage. In the HTML, I use:
<p>{{trans('menu.items.news')}}</p>I also have a method in header.component.ts:
trans(key){
const TRANS = JSON.parse(localStorage.getItem('translations'));
return key.split('.').reduce(function(prev, curr){
return prev ? prev[curr] : null;
}, TRANS || self);
}
However, I want this method to be accessible by other components in the root module, not just in the header component.
In addition, there is a service for fetching translations in the header's HTML select list:
changeTranslation(e){
localStorage.setItem('language', e.target.value);
localStorage.removeItem('translations');
this.translation.getTranslation().subscribe(response => localStorage.setItem('translations', JSON.stringify(response)));
}
How can I implement or call the translation service once in the app module so that it can be used in other components? Any suggestions would be appreciated. Thank you!