translate attribute not working for span tag

[santoshpatro]

I have the following method in typescript file which generates a dynamic list of buttons with different text content. I am using ngx-translate library for managing the translation functionality for an angular application having ng-version="4.4.7". Here in this case I want to use the translate pipe to generate the translated text across different languages.

private getButtonTemplate(showLabel = true) {
    return `
      <button onclick="$onClick" data-social="$text" class="social-sharing-btn ${showLabel ? 'with-label' : ''}">
        <span class="icon icon_$text.toLowerCase()"></span>
        ${showLabel ? 'Shareon$text' : ''}
      </button>
    `;
  }

I have the following key in translations file:

en.json : { "ShareonFacebook": "Share on Facebook", "ShareonSina": "Share on Sina" }

es.json : { "ShareonFacebook": "Compartir en Facebook", "ShareonSina": "Compartir en Sina" }

I tried the following code but still it is not working:

private getButtonTemplate(showLabel = true) {
    return `
      <button onclick="$onClick" data-social="$text" class="social-sharing-btn ${
        showLabel ? "with-label" : ""
      }">
        <span class="icon icon_$text.toLowerCase()"></span>
        <span style="font-size:13px;" translate>${
          showLabel ? "Shareon$text" : ""
        }</span>
      </button>
    `;
  }

Can anyone help me to fix this issue?

Thanks, Santosh

[JoseHawk]

Hello @santoshpatro, did you find any solution for this? I am having the exact same issue. Thanks

[ramchale]

For now I'm working round this by using <span [innerHTML]="'MESSAGE' | translate"></span>