Iframes in Angular2

Question

import {Component} of '@ 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 above. How to pass testRequestId to html.

Answer 1

try the following:

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 does not trust any source, it will sanitize the content, then we need to bypass it.

More on this topic: https://angular.io/docs/ts/latest/guide/security.html

Template Syntax

Answer 2

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';
}