Как динамически изменить src в Angular для iframe?

Question

У меня есть тег mat-option, я бы хотел, чтобы пользователь выбрал опцию из выпадающего списка, и он автоматически загрузит URL iframe src, связанный с выбором пользователя.

component.html

<div class="container">
<div class="row">
<div class=".col-md-10 .col-sm-10">
  <div *ngIf="selectedReport">
  <mat-card class="dashboard-card">
    <iframe width="950" height="680" ng-src="{{selectedReport.url}}" frameborder="0" allowFullScreen="true"></iframe>
  </mat-card>
  </div>
</div>

<div class=".col-md-2 .col-sm-2">
  <mat-card class="navigation-card">
    <mat-card-header>
      <mat-card-title>Report</mat-card-title>
    </mat-card-header><hr>
    <mat-card-content>
      <mat-select placeholder="Select a project">
        <mat-option *ngFor="let report of reports" [class.selected]="report === selectedReport">
          {{report.name}}
        </mat-option>
      </mat-select>
    </mat-card-content>
  </mat-card>
</div>

макет data.ts Следующие ссылки не являются правильными. Предоставил им показать структуру

import { Report } from './model/report';

export const REPORTS: Report[] = [
{ id: 1, name: 'Test1', url:'<iframe 
src="https://www.google.com/maps/embed?" },
{ id: 2, name: 'test2', url:"https://www.google.com/maps/embed?" }
];