CODEWITHSUNDEEP
angularinnerhtmlngx-translate
nash
nash

Reputation: 533

Ngx Translate Inner HTML tags in html

I am using ngx-translate lib to support I18N in my angular app. Can anyone help me to translate inner HTML with multiple tags?? It only keeps the class tag and avoid the rest of them.

i18n/en.json

 "CONTENT": "<h5 class='subsection-header' id='cont-1'>Events and characters</h5>"

info.component.html

<div class="section" [innerHtml]="'CONTENT' | translate"></div>

Result:

<h5 class="subsection-header">Events and characters</h5> // Not applying ID tag.

Upvotes: 2

Views: 857

Answers (2)

sfelli
sfelli

Reputation: 185

You can create a safeHtml pipe for your trusted HTML to be reused in your application

@Pipe({ name: 'safeHtml' })
export class SafeHtmlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}

  transform(value) {
    return this.sanitizer.bypassSecurityTrustHtml(value);
  }
}

Use it

   <div class="section" [innerHtml]="'CONTENT' | translate | safeHtml"></div>

Upvotes: 0

Amine
Amine

Reputation: 119

Try to create a function that will return the innerHTML, while returning the value use DomSanitizer function bypassSecurityTrustHtml() example :

ts :

 import { DomSanitizer } from '@angular/platform-browser';
    
    constructor(private sanitizer: DomSanitizer) { }
    
    function() {
    let content: string; // content used in translate
    return this.sanitizer.bypassSecurityTrustHtml(content);
    }

HTML :

<div class="section" [innerHtml]="function()"></div>

that will keep the id tag and prevent the default behavior of innerHTML tag

Upvotes: 1

Related Questions