CODEWITHSUNDEEP
javascriptangulartypescriptngx-translate
Chinaedu Onwukwe
Chinaedu Onwukwe

Reputation: 437

How to traslate a whole html page with ngx translate

My privacy policy is embedded as full html. I would like to translate it with ngx-translate but it would be much to time expensive and completely unstructured if I would translate it per html tag as ngx-translate suggests it. This is what the policy is designed like:

<h1>Datenschutzerklärung</h1>
    <p>Verantwortlicher im Sinne der Datenschutzgesetze, insbesondere der EU-Datenschutzgrundverordnung (DSGVO), ist:
    </p>
    <p>Chinaedu Pascal Onwukwe</p>
    <h2 id="betroffenenrechte">Ihre Betroffenenrechte</h2>
    <p>Unter den angegebenen Kontaktdaten unseres Datenschutzbeauftragten können Sie jederzeit folgende Rechte ausüben:
    </p>
    <ul>
      <li>Auskunft über Ihre bei uns gespeicherten Daten und deren Verarbeitung (Art. 15 DSGVO),</li>
      <li>Berichtigung unrichtiger personenbezogener Daten (Art. 16 DSGVO),</li>
      <li>Löschung Ihrer bei uns gespeicherten Daten (Art. 17 DSGVO),</li>
      <li>Einschränkung der Datenverarbeitung, sofern wir Ihre Daten aufgrund gesetzlicher Pflichten noch nicht löschen
        dürfen (Art. 18 DSGVO),</li>
      <li>Widerspruch gegen die Verarbeitung Ihrer Daten bei uns (Art. 21 DSGVO) und</li>
      <li>Datenübertragbarkeit, sofern Sie in die Datenverarbeitung eingewilligt haben oder einen Vertrag mit uns
        abgeschlossen haben (Art. 20 DSGVO).</li>
    </ul> ...

I would like to find a way on how to translate this without translating each single html tag but more like replacing an html file. Does anybody know how I would do this. Thanks in advance.

Upvotes: 0

Views: 1369

Answers (1)

Merack
Merack

Reputation: 115

You can translate an HTML template using the instant method of TranslateService with DomSanitizer service. Something like this:

component.ts

constructor(
  public translate: TranslateService,
  public sanitizer: DomSanitizer
) {}

getTranslatedHtmlSnippet(s: string): SafeHtml {
  return this.sanitizer.bypassSecurityTrustHtml(this.translate.instant('HOME.TEXT'));
}

and you can inject with innerHtml the translated HTML.

template.html

<div [innerHtml]="getTranslatedHtmlSnippet()"></div>

In order to work, you must provide a different template in the translation file.

i18n.json

{
  "HOME": {
    "TEXT": "<div style='color: red;'> eng <div>"
  }
}

I leave you a link to stackbliz to see a running example:

https://stackblitz.com/edit/angular-translation-service-cpupat

However, I suggest you NOT use this kind of approach and always translate only string/content, not structure. If you really need this kind of translation and is not restricted to a single component is better to create a pipe.

Upvotes: 1

Related Questions