Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

convert text to html format in angular

I am creating post request with promise, using angular 6. In my service I created a request function which looks like this:

sendRequest() {
let promise = new Promise((resolve, reject)=>{
  this.http.post(this.url, this.params, {responseType: 'text'}).toPromise()
  .then(res =>{
    this.data = res;
    this.router.navigateByUrl('1/success'); // I want to show res code on this page
    resolve();
  },
  error => {
    this.data = error;
    this.router.navigateByUrl('1/fail');
    reject(error);
  } 
)
return promise;
})}

res returns text in html format like that:

<html> <head> some code </head> <body> code i need </body> </html> , which is fine, but I would like to use that text as html code on success/fail page. Specifically, everything that is in body tag. How can i achieve that? If i use anything like

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

or

{{res}}

it just returns plain text.

like image 993
Tadej Vozlic Avatar asked Sep 02 '25 06:09

Tadej Vozlic


2 Answers

Angular encodes the values returned by the api for security purposes. You have to use the DomSanitizer service in your service to bypass it.

First inject the service:

constructor(private sanitizer:DomSanitizer){}

Then use it in your sendRequest function:

this.data = this.sanitizer.bypassSecurityTrustHtml(res);    

And then in your html file:

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

Note:

Trusting values in HTML format may pose a security risk as mentioned in the docs.

like image 88
Ali Rida Avatar answered Sep 04 '25 23:09

Ali Rida


Using innerHTML like this:

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

Make sure you got controller somewhere around that, maybe you forgot it?

It should work according to this: Angular - template syntax

like image 23
DanteTheSmith Avatar answered Sep 04 '25 23:09

DanteTheSmith