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>

Page Screenshot

How exactly have you tried integrating this HTML page in your Angular app? Because here, Angular is not even loaded — Jeremy Thille, Feb 10 '21 at 07:06

score 0 · Answer 1 · answered Feb 10 '21 at 07:23

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

Render HTML/CSS/JS in Angular

1 Answers1