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.
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.
Share Improve this question edited Jul 12, 2018 at 8:23 Tadej Vozlic asked Jul 12, 2018 at 7:50 Tadej VozlicTadej Vozlic 4475 gold badges7 silver badges18 bronze badges 1- Visit stackoverflow.com/questions/48339039/… – Siddharth Jain Commented Jul 12, 2018 at 8:34
3 Answers
Reset to default 8Angular 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.
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
<div [innerHtml]="challenges_Data.challenges"></div>
here challenges_Data is an object and challenges is the values of challenges_Data .