Binding to separate element on (click) in Angular 2 - html

Question

I have an html audio element that I would like to play when you click an image of a play button. I'm working in Angular 2 so it's a little more complicated than just using jQuery binding... Here's what I have so far:
#Component({
selector: 'listen',
template: `
<h1>Play Your Greeting!</h1>
<img src="../images/play.svg" (click)="playMusic($event)">
<audio controls src="../music/06 What Is The Light_.mp3">
`,
styles: [`
img {
width: 30%;
}
`]
})
export class ListenComponent {
constructor(
private listenService: ListenService,
private route: ActivatedRoute,
private router: Router
) {}
playMusic(event) {
console.log(event.target);
event.target.play();
}
}
Obviously the event is attaching to the image, but somehow I need the .play() to be called on the audio tag.

Answer 1

You can just assign a local variable to the audio element, then pass it to the method call
<img src="../images/play.svg" (click)="playMusic(audioEl)">
<audio #audioEl controls src="../music/06 What Is The Light_.mp3">
playMusic(el: HTMLAudioElement) {
el.play();
}
See the #audioEl. This is assigning the audio element to the template accessible variable. You can see it is being passed to the playMusic method call