Reputation: 533
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
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
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