title: Trying to pass URL into Iframe Src Angular 2 getting an error
body: <p>I'm trying to dynamically add a URL into an <code>iframe src</code> on a click event but I'm getting this error</p>
  
  <p><code>Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'SafeValue%20must%20use%20%5Bproperty%5D'</code></p>
  
  <p>Ive used domSanitizer to make the URL safe to insert it in the <code>iframe</code></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code> &lt;div class="cards-wrapper"&gt;
                  &lt;div class="prepackaged__card" *ngFor="let video of videos"&gt;
  
                      &lt;img class="prepackaged__card-header" src="{{video.thumbnail}}"&gt;
                      &lt;div class="prepackaged__card-body"&gt;
                          &lt;div class="category"&gt;{{video.subname}}&lt;/div&gt;
                          &lt;h2 class="title"&gt;{{video.name}}
                          &lt;/h2&gt;
  
                          &lt;button (click)="sendUrl(video.videoData)"&gt;PLAY VIDEO&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  &lt;div class="video-player-modal"&gt;
       &lt;div class="video-player-modal_header"&gt;
  
       &lt;/div&gt;
       &lt;div class="video-player-modal_video"&gt;
           &lt;iframe class="video-player-modal_video_player" src="" frameborder="0" allowfullscreen=""&gt;&lt;/iframe&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>app.component.ts</strong> </p>
  
  <pre><code>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) =&gt; {
      this.videos = result;
      console.log(this.videos);
   });
  }
  
    sendUrl(playerUrl) {
      this.trustedDashboardUrl = this.sanitizer.bypassSecurityTrustResourceUrl(playerUrl);
      $('.video-player-modal_video_player').attr('src', this.trustedDashboardUrl);
    }
  
  }
  </code></pre>
  
  <p>any ideas on what is happening?</p>