iFrame with dynamic binding is not working

Question

I am new to Angular, I am trying to embed the PowerBi reports dynamically change the src of the iFrame like below

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
   Power BI Reports
  </h1>
  </div>
<select (onclick) = "selectedOption($event)">
    <option> Select </option>
  <option value="https://app.powerbi.com/reportEmbed?reportId=&groupId=&autoAuth=true&ctid="> Colony Productivity</option>
</select>

<iframe width="1140" height="541.25" ng-if="safeUrl" src="safeUrl" frameborder="0" allowFullScreen="true"></iframe>
<router-outlet></router-outlet>

And the component.ts is

import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'PowerBIIntegration';
selectedValue: string = ''; 
safeUrl: SafeHtml ='';

constructor(private sanitizer: DomSanitizer) {
}
  selectedOption( event : any){
    this.selectedValue = event.target.value;
   this.safeUrl =  this.sanitizer.bypassSecurityTrustHtml(this.selectedValue);
    console.log(this.selectedValue);
  }
}

When I try to call http://localhost:4200. The page keeps loading with the error

Angular is running in the development mode. Call enableProdMode() to enable the production mode.

`core.js:15724 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'safeUrl' Error: Cannot match any routes. URL Segment: 'safeUrl' at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:2469) at CatchSubscriber.selector (router.js:2450)

Answer 1

You are doing lots of mistakes. Like for bindings events in Angular on prefix should be avoided and you are using that on select element. Instead of click use change event. Other mistakes you are doing with DomSanitizer service. As we are using the resource url and then we should use bypassSecurityTrustResourceUrl instead of bypassSecurityTrustHtml. You are also doing mistakes using bindings (look closely *ngIf, [src]) in Angular. I had done some correction in your code and below are the updated code.

component.html

<div style="text-align:center">
  <h1>
   Power BI Reports
  </h1>
  </div>
<select (change)="selectedOption($event)">
    <option> Select </option>
  <option value="https://app.powerbi.com/reportEmbed?reportId=&groupId=&autoAuth=true&ctid="> Colony Productivity</option>
</select>

<iframe width="1140" height="541.25" *ngIf="safeUrl" [src]="safeUrl" frameborder="0" allowFullScreen="true"></iframe>

component.ts

import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {
  title = 'PowerBIIntegration';
  selectedValue: string = ''; 
  safeUrl: SafeHtml ='';

  constructor(private sanitizer: DomSanitizer) {
  }

  selectedOption( event : any){
    this.selectedValue = event.target.value;
    this.safeUrl =  this.sanitizer.bypassSecurityTrustResourceUrl(this.selectedValue);
    console.log(this.selectedValue);
  }
}