title: Dynamic iframe source with angular
body: <p>I am trying to use payment system with Angular. In the payment gateway API, 3D Secure Page exposing as an html in json. I am trying to put this html in an iframe. The main problem is html is not shown. When I try to inspect element on browser, there are html code in the iframe but not shown. What is the reason of it? How can I solve this?</p>
  
  <p><strong>payment.component.ts:</strong></p>
  
  <pre><code>this.applicationService.pay(this.card).subscribe((data: any) =&gt; {
      this.modalContent = data.content;
  }
  </code></pre>
  
  <p><strong>payment.component.html</strong></p>
  
  <pre><code>&lt;iframe [innerHTML]="modalContent | sanitizeHtml" frameborder="0"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p><strong>3d secure content example:</strong></p>
  
  <pre><code>&lt;!doctype html&gt;↵&lt;html lang="en"&gt;↵&lt;head&gt;↵    &lt;title&gt;iyzico Mock 3D-Secure Processing Page&lt;/title&gt;↵&lt;/head&gt;↵&lt;body&gt;↵&lt;form id="iyzico-3ds-form" action="https://sandbox-api.iyzipay.com/payment/mock/init3ds" method="post"&gt;↵    &lt;input type="hidden" name="orderId" value="mock64-7127975743472898iyziord"&gt;↵    &lt;input type="hidden" name="bin" value="405418"&gt;↵    &lt;input type="hidden" name="successUrl" value="https://sandbox-api.iyzipay.com/payment/iyzipos/callback3ds/success/37"&gt;↵    &lt;input type="hidden" name="failureUrl" value="https://sandbox-api.iyzipay.com/payment/iyzipos/callback3ds/failure/37"&gt;↵    &lt;input type="hidden" name="confirmationUrl" value="https://sandbox-api.iyzipay.com/payment/mock/confirm3ds"&gt;↵    &lt;input type="hidden" name="PaReq" value="66e28140-1079-4f29-81c6-0220c720620e"&gt;↵&lt;/form&gt;↵&lt;script type="text/javascript"&gt;↵    document.getElementById("iyzico-3ds-form").submit();↵&lt;/script&gt;↵&lt;/body&gt;↵&lt;/html&gt;
  </code></pre>