When I click to dynamically add a URL into an iframe src, I encounter the following error message:
Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'SafeValue%20must%20use%20%5Bproperty%5D'To ensure the safety of the URL before inserting it into the iframe, I have utilized domSanitizer.
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);
}
}
Do you have any insights on what might be causing this issue?