Angular2: How to change iFrame src?

12,172

no need to deal with the event for such a thing as you can access component properties from the template...

template:

<button md-button (click)="updateSrc(first_url)"  id="first" class="top-link">First</button>
<button md-button  (click)="updateSrc(second_url)" id="second" class="top-link">Second</button>

<iframe id="frame" frameborder="0" [src]="current_url"></iframe>

ts :

first_url = "some url";
second_url = "some other url":
current_url: SafeUrl;


updateSrc(url) {
    this.current_url=this.sanitizer.bypassSecurityTrustResourceUrl(url)
  }
Share:
12,172
Himanshu Yadav
Author by

Himanshu Yadav

Big data and distributed systems

Updated on June 13, 2022

Comments

  • Himanshu Yadav
    Himanshu Yadav almost 2 years

    I am new to Angular2 and trying to change iframe's url on click of a button. Got passed couple of hurdles like safe url and setting the src for iframe. Can't figure out a nice way to change the url on click of buttons/links.
    How can change the iFrame url based on the button id?
    HTML

    <button md-button (click)="updateSrc($event)"  id="first" class="top-link">First</button>
      <button md-button  (click)="updateSrc($event)" id="second" class="top-link">Second</button>
    
    <iframe id="frame" frameborder="0" [src]="changeUrl()"></iframe>
    

    Component

    private first_url = "some url";
    private second_url = "some other url":
    
    updateSrs(event) {
        console.log('Here');
        console.log(event.currentTarget.id);
        this.reportUrl();
      }
    ;
      changeUrl() {
        return this.sanitizer.bypassSecurityTrustResourceUrl(this.first_url);
      }