ngx-translate angular5 custom elements

Question

i am trying to translate an application, where jointjs is used to create elements. If the custom element template contains ex: {{ 'EXAMPLE' | translate }} then it is displayed as {{ 'EXAMPLE' | translate }} and is not translated. Is there any solution to generate component before the ngx-translate is done? Thank you

EDIT having TS class ElementBuilder which builds with the jointjs the elemet having TS class with HTML template ExampleElement which inherits from ElementBuilder in the template of ExampleElement is used the: {{ 'EXAMPLE' | translate }} which is not translated.

Try 1: Added to constructors the TranslateService, and when calling the ExampleElement the translateService is passed. Nothing changes, it is not translated

You should add the parts of your code related to ngx-translate like where we can see how you're importing the TranslateModule, injecting the TranslateService, etc. and also the part where you're using jointjs (at least the block where you're creating the element that's causing you problems. — fnmps

Abedin.Zhuniqi Abedin.Zhuniqi · Accepted Answer · 2018-09-27T21:56:40

You can for example somewhere in assets to create a folder and into the folder which language you need and then in the ts file call the ngx-translate

Here is one example for the translate what I have done. Code in the assets

English Language the file need to be json file

{
  "button": {
    "#save": "Save",
    "#cancel": "Cancel"
}
}

Deutschland sprache

{
  "button": {
    "#save": "Speichern",
    "#cancel": "Abbrechen"
  }
}

You need to define in constructor of the TS file

constructor(private translate: TranslateService) {}

Html Code

<button matTooltip="{{'button.#add' | translate}}" matTooltipPosition="below">&nbsp;
</button>

ngx-translate angular5 custom elements

1 Answers