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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With