Render HTML/CSS/JS in Angular
Question
I'm getting the following code as a response of hitting a post API. This code when pasted in HTML section of codepen works fine as shown in the screenshot but when I'm trying to integrate this in html file of angular, it is giving blank with only a loader loading. Does anybody have any idea as to how to integrate this in angular? Any hint would suffice. I tried doing this by placing the entire code below in a string and rendering it through innerHtml but that doesn't help too.
<!doctype html>
<html>
<head>
<title>Payment Page · Razorpay</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta charset="utf-8">
<script>
var meta = {};
var options = {"name":"XYZ Education","order_id":"order_GZjwHCFWRWeIOx","amount":"500000","currency":"INR","callback_url":"https:\/\/razorpay.com\/docs\/payment-gateway\/web-integration\/hosted\/checkout-options\/"};
var urls = {};
options.key = "";
</script>
</head>
<body>
<style>
@keyframes lo {
to {
transform: rotate(360deg)
}
}
@-webkit-keyframes lo {
to {
-webkit-transform: rotate(360deg)
}
}
.loader {
height: 24px;
width: 24px;
border-radius: 50%;
display: inline-block;
animation: lo .8s infinite linear;
-webkit-animation: lo .8s infinite linear;
transition: 0.3s;
-webkit-transition: 0.3s;
opacity: 0;
border: 2px solid #3395FF;
border-top-color: transparent
}
.vis {
opacity: 1
}
</style>
<div class="loader vis" style="position:absolute;top:115px;left:50%;margin-left:-12px"></div>
<script src="https://cdn.razorpay.com/static/hosted/embedded-entry.js"></script>
1 answers
solution1
0 2021-02-10 07:23:44
If you are trying to set this as innerHTML for a specific HTML element, Angular offers the following syntax, where yourhtml is a variable containing your HTML as a string:
<div class="blog-post" [innerHtml]="yourhtml"></div>
Answer inspired by Cobus Kruger 's answer here where he sheds better light on the subject
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.