convert text to html format in angular

Question

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.

Visit https://stackoverflow.com/questions/48339039/angular-5-add-dynamic-html-file-into-div/ — Siddharth Jain, Jul 12 '18 at 08:34

Ali Rida · Accepted Answer · 2018-07-12T11:28:45.267

8

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.

edited Jul 12 '18 at 11:28

answered Jul 12 '18 at 08:35

Ali Rida

336
2
10

It doesn't work. For some reason it cuts out whole string so it results in blank page. – Tadej Vozlic Jul 12 '18 at 10:03
How are you transferring the res value to the success/fail component? – Ali Rida Jul 12 '18 at 10:13
as it says code above, in service where i make a request: this.data = res; then in suc/fail comp. i have data:string = this.myService.data; – Tadej Vozlic Jul 12 '18 at 11:22

DanteTheSmith · Answer 2 · 2018-07-12T08:32:29.543

3

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

edited Jul 12 '18 at 08:32

answered Jul 12 '18 at 08:26

DanteTheSmith

2,937
1
16
31

already did that, but it results in random snipped of the whole which doesn't make sense – Tadej Vozlic Jul 12 '18 at 10:05

score 2 · Answer 3 · edited Aug 21 '19 at 06:55

2

<div [innerHtml]="challenges_Data.challenges"></div>

here challenges_Data is an object and challenges is the values of challenges_Data .

edited Aug 21 '19 at 06:55

Bhargav Rao

50,140
28
121
140

answered Aug 21 '19 at 06:31

Rajendra Rajput

85
6

convert text to html format in angular

3 Answers3