Get an html code from string and display it in angular

Issue

I have the body of an email stored in a javascript/typescript string (message.body). The content of that string is an html code like this:

<div dir="ltr">test mail</div>

I'm using angular bootstrap and I tried this code:

javascript/typescript code:

ShowMessage(message: MailMsg) {

    const modalRef = this.modalService.open(MailModal, { centered: true });
    modalRef.componentInstance.msg = message;
    modalRef.componentInstance.body = $(message.body);

} 

html code:

<div class="bodyMsg">
    <div type="text/html">{{body}}</div>
</div>

I'm getting this output: [object Object]

How can I propperly display the content of that initial message.body string?

Thanks

Solution

First of all, we need a DomSanitizer instance in the class, so we declare it in the constructor: constructor(private sanitizer: DomSanitizer)

And this is the code for converting the string to a SafeHtml object, that we can import to our html code:

const parser = new DOMParser();
const document = parser.parseFromString(mensaje.cuerpo, 'text/html');
modalRef.componentInstance.body = this.sanitizer.bypassSecurityTrustHtml(document.body.outerHTML);

The last thing missing is to tell out HTML that this code is not malicious and it's safe to display it with the [innerHTML] tag:

<div [innerHTML]="body"></div>

Working!

Answered By - Jaime