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 }} {{ 'EXAMPLE' | translate }} then it is displayed as {{ 'EXAMPLE' | translate }} {{ '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 }} {{ '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

Answer 1

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>