CODEWITHSUNDEEP
htmlangulariframeionic4
Acer79
Acer79

Reputation: 213

iframe src property as a URL dynamically Angular2

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.

Upvotes: 4

Views: 8846

Answers (3)

Sudipto Mukherjee
Sudipto Mukherjee

Reputation: 945

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

Upvotes: 10

Sushil
Sushil

Reputation: 830

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",
};

Upvotes: 5

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41397

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"

Upvotes: 1

Related Questions