Ngx Translate Inner HTML tags in html-CodePudding

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  [innerHtml]="'CONTENT' | translate"></div>

Result:

<h5 >Events and characters</h5> // Not applying ID tag.

CodePudding user response：

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  [innerHtml]="function()"></div>

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

CodePudding user response：

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  [innerHtml]="'CONTENT' | translate | safeHtml"></div>