CODEWITHSUNDEEP
angulariframe
Himanshu Yadav
Himanshu Yadav

Reputation: 13587

Angular 2: Update the iframe src when router url gets change

App has a top-bar with 3 dashboard buttons on it. Every link opens up a new dashboard on the page via iframe.
app.component.html

<md-toolbar class="toolbar">
  <span>Dashboardds</span>
  <span class="spacer"></span>
  <button md-button  [routerLink]="['/dashboard', 'first']"  id="first" class="top-link">First</button>
  <button md-button  [routerLink]="['/dashboard', 'second']"  id="second" class="top-link">Second</button>
  <button md-button  [routerLink]="['/dashboard', 'third']"  id="third" class="top-link">Third</button>
</md-toolbar>
<router-outlet></router-outlet>

app.module.ts

{path: 'dashboard/:id', component: DashboardComponent},
{path: '', redirectTo: 'dashboard/first', pathMatch: 'full'},
{path: '**', redirectTo: 'dashboard/first', pathMatch: 'full'}

Dashboard component is very straightforward. It has 3 urls and 1 iframe.
dashboard.component.html

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){
  }
}

dashboard.component.html

<iframe id="report-frame" frameborder="0" [src]="dashboardUrl"></iframe>

How can I update iframe url based on the button clicked on the topbar and reload the iframe with new url?

Upvotes: 2

Views: 11678

Answers (1)

bl4y.
bl4y.

Reputation: 540

You should subscribe in the dashboard.component.ts file to the ActivatedRoute object to get the changes in the route and update the iframe. To avoid the unsafe value error while setting the iframe destination and to keep your code clean, you should use the DomSanitizer within a pipe.

safe.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer} from '@angular/platform-browser';

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
  constructor(
    private sanitizer: DomSanitizer
  ) { }

  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

Also, don't forget to add SafePipe to the declarations of you AppModule.

dashboard.component.ts

export class DashboardComponent implements OnInit {
  private dashboardUrl: string;
  private urlMap: { local: string, remote: string }[] = [
    { local: "first", remote: "http://google.com" },
    { local: "second", remote: "http://stackoverflow.com" }
    // ...
  ];

  constructor(
    private route: ActivatedRoute
  ) { }

  ngOnInit() {
    this.route.params.subscribe(params => {
      let localParam = params['id'];
      this.dashboardUrl = this.urlMap.filter(x => x.local == localParam)[0].remote;
    });
  }
}

dashboard.component.html

<iframe id="report-frame" frameborder="0" [src]="dashboardUrl | safe"></iframe>

Upvotes: 5

Related Questions