0
export class SetUpAppPopupComponent {
   constructor(public sanitizer: DomSanitizer) { }

   ngOnInit() {
      this.IFrameUrl = this.sanitizer.bypassSecurityTrustResourceUrl("https://angular.io/");
   }


  getAppHtml() {
    var MinifiedHtml = "<div> <iframe class=\"col-md-12\" style=\"display:block;height:100%\" [src]=\"IFrameUrl\" frameborder=\"0\" allowFullScreen=\"true\"></iframe> </div>"
    return this.sanitizer.bypassSecurityTrustHtml(MinifiedHtml);
   }

}

.html

<div [innerHtml]="getAppHtml()"></div>

If you look at the above example HTML is getting rendered but the JSON model object "IFrameUrl" is not getting binded to IFrame tag. Is there a way to achieve it?

Christian Benseler
  • 7,907
  • 8
  • 40
  • 71
Sachin jeev
  • 201
  • 4
  • 14

1 Answers1

0

Can't you just keep all the markup in the .html and just use the IFrameUrl property in the iframe's src?

.html
<div>
  <iframe class="col-md-12" style="display:block;height:100%" [src]="IFrameUrl" frameborder="0" allowFullScreen="true"></iframe>
</div>

Anyway, the problem, I guess, is that using this sanitized string won compile the value form the IFramrUrl property. Maybe this works:

var MinifiedHtml = `<iframe class="col-md-12" style="display:block;height:100%" src="${IFrameUrl}" frameborder="0" allowFullScreen="true"></iframe>`

PS: note that you can (should) use template strings to build complex html/strings with interpolation https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/template_strings

Christian Benseler
  • 7,907
  • 8
  • 40
  • 71
  • Nope, Its quite a complicated project. I simplified just to post it as a question. HTML is coming from a big JSON file on some conditions. It's hard to keep big HTML text in JSON file without minifying. I can not take off the minified Html. – Sachin jeev May 08 '18 at 14:16
  • So take a look at the code I have provided using template strings and using the values from the class properties/variables inside it. – Christian Benseler May 08 '18 at 14:17
  • Sorry, I couldn't follow that, how would u do for [(ngModel)]=\"AppConfigData.HeaderText\" ?? – Sachin jeev May 08 '18 at 14:20
  • You guess you won't be able to do this, this way, using innerHTML, because the injected text won't be "compiled" by Angular template engine. You will have to take a look if is possible to do this with Dynamic Component Loader https://angular.io/guide/dynamic-component-loader – Christian Benseler May 08 '18 at 14:22
  • There is also this thread: https://stackoverflow.com/questions/48028676/compile-dynamic-html-in-angular-4-5-something-similar-to-compile-in-angular-js?rq=1 – Christian Benseler May 08 '18 at 14:23