Trying to pass URL into Iframe Src Angular 2 getting an error

Question

I'm trying to dynamically add a URL into an iframe src on a click event but I'm getting this error

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'SafeValue%20must%20use%20%5Bproperty%5D'

Ive used domSanitizer to make the URL safe to insert it in the iframe

HTML

 <div class="cards-wrapper">
                <div class="prepackaged__card" *ngFor="let video of videos">

                    <img class="prepackaged__card-header" src="{{video.thumbnail}}">
                    <div class="prepackaged__card-body">
                        <div class="category">{{video.subname}}</div>
                        <h2 class="title">{{video.name}}
                        </h2>

                        <button (click)="sendUrl(video.videoData)">PLAY VIDEO</button>
                    </div>
                </div>
            </div>
<div class="video-player-modal">
     <div class="video-player-modal_header">

     </div>
     <div class="video-player-modal_video">
         <iframe class="video-player-modal_video_player" src="" frameborder="0" allowfullscreen=""></iframe>
     </div>
</div>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { DashboardServiceProxy, UserVideoDto } from '@shared/service-proxies/service-proxies';
import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';

declare var jQuery: any;
const $ = jQuery;

@Component({
  selector: 'app-video',
  templateUrl: './video.component.html',
  styleUrls: ['./video.component.scss'],
  providers: [
    DashboardServiceProxy
  ]
})
export class VideoComponent implements OnInit {
  videos: UserVideoDto[] = [];
  trustedDashboardUrl: SafeUrl;

  constructor(
    private _dashboardService: DashboardServiceProxy,
    private sanitizer: DomSanitizer
  ) {

    }

  ngOnInit() {
    this.getVideos();
  }

  getVideos() {
    this._dashboardService.getAllUserVideos().subscribe((result) => {
    this.videos = result;
    console.log(this.videos);
 });
}

  sendUrl(playerUrl) {
    this.trustedDashboardUrl = this.sanitizer.bypassSecurityTrustResourceUrl(playerUrl);
    $('.video-player-modal_video_player').attr('src', this.trustedDashboardUrl);
  }

}

any ideas on what is happening?

Solution

What I would recommend is using property binding instead of using jQuery for dynamically populating the attributes. It goes as follows:

Set the src attribute to a component member variable which is initialised to empty string:

[src]="iframeURL"

In your component file set iframeURL:

iframeURL = '';

Modify your click event handler as follows:

sendUrl(playerUrl) {
    // this.iframeURL = playerUrl // try it first, if it doesn't work use the sanitized URL
    this.trustedDashboardUrl = this.sanitizer.bypassSecurityTrustResourceUrl(playerUrl);
    this.iframeURL = this.trustedDashboardUrl;
}

Hope it works! Kindly share in case it doesn't.

Comments

[Peter]

I don't see click event in HTML, where is that event bind and where is the handler in component? Share the complete code.

[Smokey Dawson]

check updated code

[LLai]

What is the format of playerUrl? If its /your-route then the iframe source is appending that to your app url, so the app is trying to load within the iframe with a route that is not defined.

[Smokey Dawson]

Yeah it works but.. Im getting these errors Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'null' and Content Security Policy: The page’s settings blocked the loading of a resource at data:application/javascript;base64,KGZ1b... (“script-src https://player.vimeo.com 'unsafe-inline' https://f.vimeocdn.com https://ssl.google-analytics.com https://js-agent.newrelic.com https://bam.nr-data.net https://f.vimeocdn.com”)

[Peter]

these look like separate problems: stackoverflow.com/questions/37693411/cannot-match-any-routes for 1st error.

[Peter]

for scond error, check : stackoverflow.com/questions/37298608/…