title: Angular 2: Update the iframe src when router url gets change
body: <p>App has a top-bar with 3 dashboard buttons on it. Every link opens up a new dashboard on the page via iframe.
  <br/><strong>app.component.html</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;md-toolbar class="toolbar"&gt;
    &lt;span&gt;Dashboardds&lt;/span&gt;
    &lt;span class="spacer"&gt;&lt;/span&gt;
    &lt;button md-button  [routerLink]="['/dashboard', 'first']"  id="first" class="top-link"&gt;First&lt;/button&gt;
    &lt;button md-button  [routerLink]="['/dashboard', 'second']"  id="second" class="top-link"&gt;Second&lt;/button&gt;
    &lt;button md-button  [routerLink]="['/dashboard', 'third']"  id="third" class="top-link"&gt;Third&lt;/button&gt;
  &lt;/md-toolbar&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>{path: 'dashboard/:id', component: DashboardComponent},
  {path: '', redirectTo: 'dashboard/first', pathMatch: 'full'},
  {path: '**', redirectTo: 'dashboard/first', pathMatch: 'full'}
  </code></pre>
  
  <p>Dashboard component is very straightforward. It has 3 urls and 1 iframe.
  <br/>
  <strong>dashboard.component.html</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>export class DashboardComponent implements OnInit, OnChanges {
  dashboardUrl: SafeUrl;
    first_url: string = "first url of the dashboard";
    second_url:string="second url of the dashboard";
    third_url:string="third url of the dashboard";
  
  
    constructor(private route: ActivatedRoute, private sanitizer: DomSanitizer) {
      //console.log("Constructor "+route.snapshot.params['id']);
      this.dashboardUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.first_south_url);
    }
  
    ngOnInit() {
      this.dashboardUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.first_south_url);
    }
  
    ngOnChanges(changes: SimpleChanges){
    }
  }
  </code></pre>
  
  <p><strong>dashboard.component.html</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;iframe id="report-frame" frameborder="0" [src]="dashboardUrl"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>How can I update iframe url based on the button clicked on the topbar and  reload the iframe with new url?</p>