Ng5-Iframe in Angular 5componen

Ng5-Iframe in Angular 5component -

To load externa site inside Angular
================================
Angular untrust external site has to be inject inside Angualr App.
So, Sanitize and make trustable html5 iframe as truable.
Else Request mapping error  with cross script erro will throw.

method:1
--------
It will workin Chrome, firefox, IE
component.html
--------------
<iframe src="" frameborder="0" height="700" ></iframe>

component.ts
-------------
url = 'http://google.com';
    constructor(    private hostElement: ElementRef,  ) { }

ngOnInit(){
const iframe = this.hostElement.nativeElement.querySelector('iframe');
iframe.src = this.url;
}

method:2
---------
It contains, method 1 with full proper code implementation. And New soln.
template.html
--------------
<iframe src="" frameborder="0" height="700" ></iframe>
<iframe [src]="safeURL" frameborder="0" height="700" ></iframe>

component.ts
------------
import { Component, OnInit , Input, ElementRef} from '@angular/core';
import { DomSanitizer, SafeResourceUrl, SafeUrl , } from '@angular/platform-browser';

export component{
  url = 'http://google.com';
  safeURL : SafeResourceUrl;
 
    constructor(private sanitizer: DomSanitizer, private hostElement: ElementRef,) {  }
 
ngOnInit() {
    const iframe = this.hostElement.nativeElement.querySelector('iframe');   // work in chrome,FF,IE
    iframe.src = this.url;
    this.safeURL = this.sanitizer.bypassSecurityTrustResourceUrl( this.url );  //Not not workin IE
  }
}

Ref:
https://github.com/angular/angular/issues/16994  solution->juanbenitopr