title: How to change attributes
body: <p>I have a component which features a set of three custom buttons and I want to use these buttons as controls for a sound recorder.</p>
  <p>I got stuck in the first phase, where I want to change the symbols displayed on the buttons, according to their function.</p>
  <p>I tried to achieve that by changing their <code>xlink:href</code> attributes (I use svg), but got this in he console:</p>
  <pre class="lang-none prettyprint-override"><code>EXCEPTION: Error in ./RecordComponent class RecordComponent - inline template:5:45 caused by: this.roundButtonOne.getAttribute is not a function
  </code></pre>
  <p>Any idea why and how I could implement this with an Angular approach? Here is the code:</p>
  <pre class="lang-js prettyprint-override"><code>import {Component, ViewChild} from '@angular/core';
  
  @Component({
    selector: 'app-record',
    template: `
      &lt;svg class='roundButtonOne icon'&gt;
        &lt;use #roundButtonOne xlink:href='#mic'(click)='onRecord()'/&gt;
      &lt;/svg&gt;
      &lt;svg class='roundButtonTwo icon'&gt;
        &lt;use #roundButtonTwo xlink:href='#live' /&gt;
      &lt;/svg&gt;
      &lt;svg class='roundButtonThree icon'&gt;
        &lt;use #roundButtonThree xlink:href='#upload' /&gt;
      &lt;/svg&gt;
      `
  })
  export class RecordComponent {
  
    private recording: boolean = false;
  
    @ViewChild('roundButtonOne') roundButtonOne: HTMLElement;
    @ViewChild('roundButtonTwo') roundButtonTwo: HTMLElement;
    @ViewChild('roundButtonThree') roundButtonThree: HTMLElement;
  
    onRecord() {
      this.recording = true;
  
      switch(this.roundButtonOne.getAttribute('xlink:href')) {
        case '#mic':
          this.record();
          break;
      }
    }
  
    record() {
      this.roundButtonOne.setAttribute('xlink:href','#mic-small');
      this.roundButtonTwo.setAttribute('xlink:href', '#pause');
      this.roundButtonThree.setAttribute('xlink:href', '#stop');
    }
  }
  </code></pre>