Iframes in Angular2

Question

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
             <iframe src="http://hssa:1021/Home?testRequestId=+[testRequestId]+" allowfullscreen></iframe>`,
})
export class AppComponent  {
    name = 'Angular';
    testRequestId = '3224'; 
}

I have my .ts file as mentioned above. How do I pass testRequestId to html?

Possible duplicate of [How to set iframe src in Angular 2 without causing \`unsafe value\` exception?](http://stackoverflow.com/questions/38037760/how-to-set-iframe-src-in-angular-2-without-causing-unsafe-value-exception) — Bruno João, Feb 03 '17 at 18:15

Tiep Phan · Answer 1 · 2017-02-03T17:25:14.123

11

try this:

Online demo

Safe Pipe

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer} from '@angular/platform-browser';

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url: string) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

AppComponent

import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <iframe [src]="'https://www.youtube.com/embed/' + testRequestId | safe" width="560" height="315" allowfullscreen></iframe>
  `
})
export class AppComponent {
  testRequestId: string = 'uelHwf8o7_U';

}

because Angular not trust any source, it'll sanitize the content, then we need bypass it.

Learn more about this topic: https://angular.io/docs/ts/latest/guide/security.html

Template syntax

edited Feb 03 '17 at 17:25

answered Feb 03 '17 at 16:40

Tiep Phan

12,386
3
38
41

If I change as mentioned, it gives the URL on debugging like this hssa:1021/Home?testRequestId=, which wont work. The testRequestId is getting passed as empty here. – test Feb 03 '17 at 16:49
Severity Code Description Project File Line Suppression State Error TS7006 Parameter 'url' implicitly has an 'any' type. – test Feb 03 '17 at 17:22
huh, this is not Angular bug, just VS build tool. `testRequestId: string = 'uelHwf8o7_U';` – Tiep Phan Feb 03 '17 at 17:24
i just add Type for both code above, please config your IDE to ignore this issue `Parameter 'xxx' implicitly has an 'any' type` – Tiep Phan Feb 03 '17 at 17:26
Its still the same even after adding the line testRequestId: string = 'uelHwf8o7_U'; – test Feb 03 '17 at 17:26
`transform(url: string)` this line too – Tiep Phan Feb 03 '17 at 17:28

score 0 · Answer 2 · answered Feb 03 '17 at 16:40

0

Just change +[testRequestId]+ to {{testRequestId}}.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
<iframe src="http://hssa:1021/Home?testRequestId={{testRequestId}}"    allowfullscreen></iframe>`,
})
export class AppComponent  {
    name = 'Angular';
    testRequestId = '3224';
}

answered Feb 03 '17 at 16:40

Bruno João

5,105
2
21
26

If I change as mentioned, it gives the URL on debugging like this http://hssa:1021/Home?testRequestId={{testRequestId}}, which wont work. – test Feb 03 '17 at 16:48
1

You can see here http://stackoverflow.com/questions/38037760/how-to-set-iframe-src-in-angular-2-without-causing-unsafe-value-exception – Bruno João Feb 03 '17 at 18:15

Iframes in Angular2

2 Answers2