CODEWITHSUNDEEP
javascriptjqueryangulartypescriptiframe
Smokey Dawson
Smokey Dawson

Reputation: 9230

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

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?

Upvotes: 3

Views: 11218

Answers (1)

Manu
Manu

Reputation: 10944

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.

Upvotes: 4

Related Questions