title: Angular 2 Parent Component Losing Input Binding from Child Component
body: <p>I'm working with a parent component that references a child component that plays an audio file in Angular 2.  Initially, I'm passing the audio file an input variable of _audioState which contains a string value of "Listen".  When the audio button is clicked, this value changes to "Playing" and then "Replay" once the audio file is done playing.  These string value changes happen in the audio child component.  </p>
  
  <p>When the button with the nextAudio function is clicked in the parent component, I want to reassign _audioState back to "Listen", but the input binding isn't working in the parent once the child component changes this value.  </p>
  
  <p>I'm still learning Angular 2 and wasn't sure the best way to get this working.  I appreciate any suggestions.  My code is below.</p>
  
  <p>Parent Component:</p>
  
  <pre><code> @Component({
      selector: 'parent-component',
      template: ' &lt;div&gt;
                      &lt;button (click)="nextAudio()"&gt;&lt;/button&gt;
                      &lt;audio-button [audioPath]="_audioPath"  
                      [audioSrc]="_audioCounter" [audioState]="_audioState"&gt;          
                      &lt;/audio-button&gt;
                  &lt;/div&gt;',
      styleUrls: ['./parent-component.less']
  })
  
  export class ParentComponent {
   _audioPath: string = "../audio/";
   _audioCounter: number = 1;
   _audioState: string = "Listen";
  
    nextAudio(): void{
      this._audioCounter = this._audioCounter + 1;
      this._audioState = "Listen";
    }  
  }
  </code></pre>
  
  <p>Child Component:</p>
  
  <pre><code>@Component({
      selector: 'audio-button',
      template: '&lt;button (click)="playSound()"&gt;&lt;i class="fa fa-volume-up"&gt;&lt;/i&gt;    
      {{audioState}}&lt;/button&gt;',
      styleUrls: ['./audio-button.component.less']
  })
  export class AudioButtonComponent {
      @Input() audioPath: string;
      @Input() audioSrc: string;
      @Input() audioState: string;
  
  playSound(): void {
      let sound: any = new Audio(this.audioPath + this.audioSrc + ".mp3");
      sound.play();
      this.audioState = "Playing";
      sound.addEventListener('ended', () =&gt; {
          this.audioState = "Replay";
      }, false)
  
      event.preventDefault();
     }
  }
  </code></pre>