iframe src property as a URL dynamically Angular2

Question

I'm having a hell of a time trying to figure out how to dynamically change the URL in a iframe src. I have tried setting the variables and then using string interpolation no luck.

Any suggestions on how i can do this. Possibly some examples if you could.

sample code i was trying;

src="https://www.wheehouse.org/company/PriceMin={{ this.itemMinimum }}&PriceMax={{ this.itemMaximum }}&BedRange={{ this.itemBedRoomType }}-0&BathRange={{ this.itemBathType }}-0"

Thanks.

Sudipto Mukherjee · Accepted Answer · 2022-06-15 18:55:17Z

10

Step 1 - In HTML page - example string can be html, url, style, script etc

[src] = "exampleString | safe: 'url'"

Step 2 - Create a safe pipe

Safe Pipe Code

import { DomSanitizer, SafeHtml, SafeResourceUrl, SafeScript, SafeStyle, SafeUrl } from "@angular/platform-browser";
import { Pipe, PipeTransform } from "@angular/core";

@Pipe({ name: "safe" })
export class SafePipe implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) { }

    public transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
        switch (type) {
            case 'html': return this.sanitizer.bypassSecurityTrustHtml(value);
            case 'style': return this.sanitizer.bypassSecurityTrustStyle(value);
            case 'script': return this.sanitizer.bypassSecurityTrustScript(value);
            case 'url': return this.sanitizer.bypassSecurityTrustUrl(value);
            case 'resourceUrl': return this.sanitizer.bypassSecurityTrustResourceUrl(value);
            default: throw new Error(`Invalid safe type specified: ${type}`);
        }
    }
}

Note: - As per safe pipe is concerned you have to implement it in order to stop DOMSanitizer to strip out content from your URL.

Please check the below URL for how to implement safe pipe. Link

edited Jun 15, 2022 at 18:55

answered Oct 22, 2019 at 7:36

Sudipto Mukherjee

9456 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Acer79 Over a year ago

thanks for your help and descriptive answer with Example. Much appreciated!

Sudipto Mukherjee Over a year ago

@Sushil have you implemented DOM Sanitizer using pipe?

Alexis Over a year ago

You should not use method in your template, a simple research on your navigator will let you understand why.

Sudipto Mukherjee Over a year ago

@Alexis I totally agree with you. It was initially written just for demo purpose. We can always directly bind string there. Thanks for pointing that out. I hope anyone using this example should keep that in mind while implementing. I am also adding a point regarding this in the answer.

Andrew Howard Over a year ago

Just to be clear if anyone is using this pipe to render an iframe url, use the 'resourceUrl' not 'url'

Sushil · Accepted Answer · 2021-06-10 08:07:38Z

Step 1 : Html file

<div *ngIf="softwareWorkingVideoLink">
    <iframe
      width="700"
      height="350"
      [src]="transform()"
      title="YouTube video player"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
    ></iframe>
  </div>

Step 2: .Ts file

import { Component } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";
import { environment } from "../../../../environments/environment";
@Component({
  selector: "app-application-tour",
  templateUrl: "./application-tour.component.html",
})
export class ApplicationTourComponent {
  softwareWorkingVideoLink: string = environment.softwareWorkingVideoLink;

  constructor(private sanitizer: DomSanitizer) {}
  transform() {
    return this.sanitizer.bypassSecurityTrustResourceUrl(
      this.softwareWorkingVideoLink
    );
  }
}

Step 3 : environment.ts

export const environment = {
  softwareWorkingVideoLink: "https://www.youtube.com/embed/JtvguK_hpIA",
};

Sachila Ranawaka · Accepted Answer · 2019-10-22 02:43:37Z

1

First, make sure your properties are public in the component. then use the properties without this in the html

src="https://www.wheehouse.org/company/PriceMin={{ itemMinimum }}&PriceMax={{ itemMaximum }}&BedRange={{ itemBedRoomType }}-0&BathRange={{ itemBathType }}-0"

answered Oct 22, 2019 at 2:43

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

2 Comments

Acer79 Over a year ago

I tried that but i get the following error; Error: unsafe value used in a resource URL context (see g.co/ng/security#xss)

Sachila Ranawaka Over a year ago

Assign this to a variable and use it from html

Collectives™ on Stack Overflow

iframe src property as a URL dynamically Angular2

3 Answers 3

5 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest