Angular2: How to change iFrame src?

Question

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

Community · Accepted Answer · 2020-06-20 09:12:55Z

8

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 15, 2017 at 15:51

n00dl3

21.6k8 gold badges70 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Himanshu Yadav Over a year ago

Do I still need to call this.reportUrl()? I am not using it anywhere on the template.

n00dl3 Over a year ago

You put it in your code, I thought it was a side-effect, but it's not needed for this code, indeed...

Collectives™ on Stack Overflow

Angular2: How to change iFrame src?

1 Answer 1

template:

ts :

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

template:

ts :

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related