Handling click within an SVG path in Angular

<div style="border: solid 1px red; height:666px; widt:444px">

<svg xmlns="http://www.w3.org/2000/svg"
width="8.26667in" height="11.6889in"
viewBox="0 0 744 1052">
<path (click)="oClick(5)" id="Selection #5"
fill="none" stroke="black" stroke-width="1"
d="M 506.00,167.00
C 506.00,167.00 470.00,168.00 470.00,168.00
470.00,168.00 398.00,168.00 398.00,168.00
398.00,168.00 399.00,208.00 399.00,208.00
399.00,208.00 435.00,208.00 435.00,208.00
435.00,208.00 455.00,210.00 455.00,210.00
455.00,210.00 507.00,210.00 507.00,210.00
507.00,210.00 507.00,182.00 507.00,182.00
507.00,182.00 506.00,167.00 506.00,167.00 Z" />
<path (click)="onClick(4)" id="Selection #4"
fill="none" stroke="black" stroke-width="1"
d="M 514.00,168.00
C 514.00,168.00 514.00,202.00 514.00,202.00
513.99,204.74 514.31,208.38 512.40,210.57
509.08,214.39 492.36,213.00 487.00,213.00
487.00,213.00 455.00,213.00 455.00,213.00
455.00,213.00 438.00,214.00 438.00,214.00
438.00,214.00 398.00,214.00 398.00,214.00
398.00,214.00 398.00,242.00 398.00,242.00
398.00,242.00 394.00,242.00 394.00,242.00
394.00,242.00 396.04,268.00 396.04,268.00
396.04,268.00 396.04,278.00 396.04,278.00
396.04,278.00 398.00,294.00 398.00,294.00
398.03,297.11 397.46,305.15 399.17,307.47
401.16,310.15 405.15,309.51 408.00,309.14
408.00,309.14 427.00,309.14 427.00,309.14
427.00,309.14 441.00,310.00 441.00,310.00
441.00,310.00 457.00,310.00 457.00,310.00
457.00,310.00 470.00,310.96 470.00,310.96
470.00,310.96 489.00,309.00 489.00,309.00
489.00,309.00 614.00,309.00 614.00,309.00
614.00,309.00 614.00,273.00 614.00,273.00
614.02,270.65 613.81,267.39 615.60,265.60
617.89,263.31 625.74,264.00 629.00,264.00
629.00,264.00 629.00,209.00 629.00,209.00
629.00,209.00 614.00,209.00 614.00,209.00
614.00,209.00 614.00,168.00 614.00,168.00
614.00,168.00 581.00,168.00 581.00,168.00
581.00,168.00 514.00,168.00 514.00,168.00 Z" />
</svg>
</div>


I snipped a few paths, but you get the picture

import {Component, ElementRef, ViewChild} from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})

export class AppComponent {



public onClick(roomNumber: number) : void {
alert('Clicked ' + roomNumber);
}


However, onClick() is never called. What am I doing wrongly?

Continue reading...