D-Net

import {Component, ElementRef, Input} from '@angular/core';

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

//Usage :: <i-frame [url]="url" width="30%" height="250"></i-frame>`

@Component({

  selector: 'i-frame',

  template: `

    <div  *ngIf="!style" class="iframeContainer uk-height-large">

      <iframe allowtransparency="true"   [src]="safeUrl"></iframe>

    </div>

    <div *ngIf="style"  class="iframeContainer" [ngStyle]="style">

      <iframe [src]="safeUrl"></iframe>

    </div>

  `

})

export class IFrameComponent {

  public safeUrl: SafeResourceUrl;

  @Input() url ;

  @Input() width: number;

  @Input() height: number;

  @Input() unit: string = 'px';

  public style: any;

  constructor(private sanitizer: DomSanitizer) {

  }

  ngOnInit() {

    this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.url);

    let width = 'width.' + this.unit;

    let height = 'height.' + this.unit;

    if(this.width && this.height) {

      this.style = {};

      this.style[width] = this.width;

      this.style[height] = this.height;

    } else if(this.height) {

      this.style = {};

      this.style[height] = this.height;

    }

  }

}