title: Angular2: How to change iFrame src?
body: <p>I am new to Angular2 and trying to change iframe's url on click of a button. Got passed couple of hurdles like <code>safe url</code> and <code>setting the src for iframe</code>. Can't figure out a nice way to change the url on click of buttons/links. <br/>How can change the iFrame url based on the button id?
  <br/>
  <strong>HTML</strong></p>
  
  <pre><code>&lt;button md-button (click)="updateSrc($event)"  id="first" class="top-link"&gt;First&lt;/button&gt;
    &lt;button md-button  (click)="updateSrc($event)" id="second" class="top-link"&gt;Second&lt;/button&gt;
  
  &lt;iframe id="frame" frameborder="0" [src]="changeUrl()"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p><strong>Component</strong></p>
  
  <pre><code>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);
    }
  </code></pre>