title: Binding an <audio> tag to a component property
body: <p>I'm building up an app in which some of the components include audio, therefore I've built an audio component. To simplify things, assume we're with the angular tour of heroes and adding a favorite song to each of the heroes.
  Given each hero has got an <code>audio_path</code> attribute (which specifies location), I can use this path in an <code>&lt;audio&gt;</code> tag and it plays. However, when switching between heroes the song does not stop and the audio file does not replace (see <a href="https://stackblitz.com/edit/angular-toh-audio" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-toh-audio</a>, for some reason sound does not play while on my computer it totally does).</p>
  
  <p>The issue is this: when switching between components of the same template (hero1->hero2), the <code>audio</code> element does not change. If there were another component of a different template in the middle (hero1->dragon1->hero2) it switches the <code>audio</code> properly, I assume because the dragon component does not include an audio tag (dragon not implemented on blitz but take my word for this).</p>
  
  <p>It is just as I constantly fail to properly bind the <code>audio</code> element to a component property (upon trying, I get this error):</p>
  
  <blockquote>
    <p>ERROR Error: No value accessor for form control with unspecified name
    attribute</p>
  </blockquote>
  
  <p>I have experienced a similar problem (failure to update content when navigating between two adjacent components) with <code>CdkDragDrop</code> elements. It does not happen with simple elements (text, textual input, radio buttons, images).</p>
  
  <p>Any ideas?</p>