|
1
|
import {Component, ElementRef, Input} from '@angular/core';
|
|
2
|
import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser';
|
|
3
|
//Usage :: <i-frame [url]="url" width="30%" height="250"></i-frame>`
|
|
4
|
@Component({
|
|
5
|
selector: 'i-frame',
|
|
6
|
template: `
|
|
7
|
<div *ngIf="!style" class="iframeContainer uk-height-large">
|
|
8
|
<iframe [src]="safeUrl"></iframe>
|
|
9
|
</div>
|
|
10
|
<div *ngIf="style" class="iframeContainer" [ngStyle]="style">
|
|
11
|
<iframe [src]="safeUrl"></iframe>
|
|
12
|
</div>
|
|
13
|
`
|
|
14
|
})
|
|
15
|
export class IFrameComponent {
|
|
16
|
public safeUrl: SafeResourceUrl;
|
|
17
|
@Input() url ;
|
|
18
|
@Input() width: number;
|
|
19
|
@Input() height: number;
|
|
20
|
public style: any;
|
|
21
|
|
|
22
|
constructor(private sanitizer: DomSanitizer) {
|
|
23
|
}
|
|
24
|
ngOnInit() {
|
|
25
|
this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
|
|
26
|
if(this.width && this.height) {
|
|
27
|
this.style = {
|
|
28
|
"width.px": this.width,
|
|
29
|
"height.px": this.height
|
|
30
|
}
|
|
31
|
}
|
|
32
|
}
|
|
33
|
}
|