1

In .html file I have:

<div id="container">
</div>

I want to add a button inside it, with some text which should be translated.

I can do It like this:

var container = document.getElementById('container');
var button = document.createElement('button');
button.innerText = this.translate.instant('SOME_TEXT');
container.appendChild(button);

Problem here is that this SOME_TEXT will be translated only one time. If language will change while this button is displayed - text won't change.

I would like to make something like:

button.innerHTML = `{{'DONE' | translate}}`;

, where translate is translate: TranslateService, in constructor, and I do import { TranslateService } from '@ngx-translate/core';

Is it possible?

pbialy
  • 1,025
  • 14
  • 26
  • Why should you create your button on this way. Is there no way to add it directly to the element? – Bo Vandersteene Nov 21 '18 at 14:01
  • 1
    if `translate` is not a built-in pipe then you have to create custom pipe – ashish pal Nov 21 '18 at 14:03
  • @Bo I need to hack a library to add button dynamicaly into a popup – pbialy Nov 21 '18 at 14:07
  • Feel free to check my answer about pipes in components : https://stackoverflow.com/questions/48183677/how-to-format-date-in-component-of-angular-5/48183927#48183927 –  Nov 21 '18 at 14:08
  • @ashish `translate` is from `@ngx-translate/core`, I'll add this to question. Problem is it doesn't work like this, it will just insert string `"{{'DONE' | translate}}"` into html. – pbialy Nov 21 '18 at 14:08
  • @trichetriche I don't want to USE pipe in component. I would like to PASS a pipe from component to html file. – pbialy Nov 21 '18 at 14:12
  • That's either using a pipe in a component, or creating a pipe. `PASS a pipe from component to html file` doesn't mean anything. –  Nov 21 '18 at 14:13
  • @trichetriche I'll try to be more clear - you can do something like `` in `html` file. I would like to insert a button from `ts` file, which will behave just like this one. – pbialy Nov 21 '18 at 14:16
  • So through innerHTML ? –  Nov 21 '18 at 14:33
  • I tried it already, as given in the example. – pbialy Nov 21 '18 at 14:36

1 Answers1

0

You can do 

export class CashMovementListComponent {
  constructor(private translate: TranslateService) { 
     ... 
     button.innerHTML = this.translate.instant('LABEL.AMOUNT_TOPAY');
  }
}
Bo Vandersteene
  • 601
  • 7
  • 16