Créer une iFrame

1
<iframe width="100%" height="400" id="iframe" #iframe frameborder="0"></iframe>

Acceder à l’élément iFrame dans le composant

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { Component, ElementRef, Renderer } from '@angular/core';
import { ConfigService } from '../../system/config.service';
import { PreviewQuestionnaireService } from '../services/PreviewQuestionnaireService';
import { ViewChild } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
selector: 'preview',
templateUrl: 'preview.template.html'
})
export class PreviewComponent {
previewUrl: string;
@ViewChild('iframe') iframe: ElementRef;

constructor(private configService: ConfigService, private sanitizer: DomSanitizer, private previewQuestionnaireService: PreviewQuestionnaireService, private renderer: Renderer) {
}

ngAfterViewInit(): void {
this.previewQuestionnaireService.questionnaireId.subscribe((qId:string) => {
let url = this.configService.config.previewUrl + '/#/questionnaires/' + qId;
this.previewQuestionnaireService.getQuestionnaireUrl(url).subscribe(() =>{
this.previewUrl = url;
},(err) =>
this.previewUrl = 'preview-not-found.html'
), () => {
this.renderer.setElementProperty(this.iframe.nativeElement, 'src',this.previewUrl)
}
});
}
}