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 stackoverflow.com/questions/48339039/…

Siddharth Jain
– Siddharth Jain

2018-07-12 08:34:16 +00:00
Commented Jul 12, 2018 at 8:34 — Siddharth Jain
– Siddharth Jain, Commented Jul 12, 2018 at 8:34

Ali Rida · Accepted Answer · 2018-07-12 11:28:45Z

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, 2018 at 11:28

answered Jul 12, 2018 at 8:35

Ali Rida

3812 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tadej Vozlic Over a year ago

It doesn't work. For some reason it cuts out whole string so it results in blank page.

Ali Rida Over a year ago

How are you transferring the res value to the success/fail component?

Tadej Vozlic Over a year ago

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;

CodeSmith · Accepted Answer · 2018-07-12 08:32:29Z

4

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, 2018 at 8:32

answered Jul 12, 2018 at 8:26

CodeSmith

3,2171 gold badge19 silver badges34 bronze badges

1 Comment

Tadej Vozlic Over a year ago

already did that, but it results in random snipped of the whole which doesn't make sense

Bhargav Rao · Accepted Answer · 2019-08-21 06:55:24Z

2

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

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

edited Aug 21, 2019 at 6:55

Bhargav Rao

52.6k29 gold badges130 silver badges142 bronze badges

answered Aug 21, 2019 at 6:31

Rajendra Rajput

856 bronze badges

Collectives™ on Stack Overflow

convert text to html format in angular

3 Answers 3

3 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Linked

Related