Load the send request in iframe in angular2

Question

I have a web service that generates HTML with embedded CSS for HTML emails in response to POST requests at the following URL: https://civinky.3sd.io/generate

I just created the http://civinky-demo.3sd.io/ application here so that people can see the HTML that will be generated. The idea is that you add parameters on the left side and press the button. Angular creates a mail request and displays the result on the right side. Preview generated HTML in iframe and raw html in div below it.

Here is the service:

import { Injectable } from '@angular/core';
import { Http, URLSearchParams }          from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

@Injectable()
export class CivinkyService {

  url ="https://civinky.3sd.io/generate"

  constructor(private http: Http, private elementRef: ElementRef) { }

  query(pug, css, json) {
    let params = new URLSearchParams()
    params.append('pug', pug)
    params.append('css', css)
    params.append('json', json)
    let body = params.toString()
    let result = this.http.post(this.url, body)
      .map(res => {return {url:res.url,html:res.text().trim()}})
    return result;
  }
}

What I request from my component

import { Component, OnInit } from '@angular/core';
import { Observable }       from 'rxjs/Observable';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { CivinkyService } from '../civinky.service';


@Component({
  selector: 'app-civinky',
  templateUrl: 'civinky.component.html',
  styleUrls: ['civinky.component.css'],
  providers: [CivinkyService]
  // encapsulation: ViewEncapsulation.None,

})
export class CivinkyComponent implements OnInit {


  url: SafeResourceUrl

  urlString: string

  html: string

  pug: string = `some pug`

  css: string = `some css`

  json: string = `some json`

  constructor(
    private civinky: CivinkyService,
    private sanitizer: DomSanitizer
  ) { }

  ngOnInit() {
    this.queryCivinky()
  }

  queryCivinky() {
    this.civinky.query(this.pug, this.css, this.json).subscribe(
      result => {
        this.html = result.html
        this.url = this.url = this.sanitizer.bypassSecurityTrustResourceUrl(result.url)
      }
    )
  }
}

Explicit Template Snippet

<iframe [attr.src]="url"></iframe> <!-- preview -->
<textarea [(ngModel)]="html" readonly></textarea> <!-- raw -->

, , iframe. iframe POST , {{html}} iframe, , .

angular2 : https://github.com/3sd/civinky-demo

:)

Answer 1

DomSanitizer -

import {DomSanitizer} from '@angular/platform-browser';

DomSanitizer ,

  constructor(private domSanitizer: DomSanitizer)

bypassSecurityTrustHtml() DomSanitizer html, http response::

this.displayString= this.domSanitizer.bypassSecurityTrustHtml("<div>html text received from api</div>");

html :

 <iframe [srcdoc]="displayString"></iframe>

, .

Answer 2

srcdoc, SafeHtml bypassSecurityTrustHtml

import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
...

export class CivinkyComponent implements OnInit {    
  htmlSrc: SafeHtml 
  html: string
  ...
}

queryCivinky() {
   this.civinky.query(this.pug, this.css, this.json).subscribe(
      result => {
        this.htmlSrc = this.sanitizer.bypassSecurityTrustHtml(result.html)
        this.html = result.html
      }
   )
}

iframe:

<iframe [srcdoc]="htmlSrc"></iframe>

: fooobar.com/questions/1642707/...