Hi,
Without success I'm trying to get code in a template node to get working on click functionality svg circle elements that output msg.topic & msg.payload when clicked in the browser. The output msg will then into another node to toggle the relevant light.
Any help to point me to the relevant docs, hints that help we understand what is going on, or what I should be looking at will be most helpful.
Here is the current "on click" snippet of code that is not working. I have tried other syntaxes after reading various online solutions, but none had addressed this particular issue. I am a stranger to mustache syntax, Angular and javascript too! What a steep learning curve node red is if you want to get fancy with it! 
<circle id="lightEast" ng-click="send({topic:'east',payload:'toggle'})" cx="60" cy="90" r="57.2957795131" fill="transparent" stroke-dashoffset="45"></circle>
The flow
The code in the template (edit UI shown below)
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--colourNorth: {{global.stateLightColourNorth}};
--colourEast: {{global.stateLightColourEast}};
--colourSouth: {{global.stateLightColourSouth}};
--colourWest: {{global.stateLightColourWest}};
}
.chart-label {
font-family: "FontAwesome";
font-size: 60px;
}
#lightNorth {
stroke: var(--colourNorth, "dimgray");
}
#lightEast {
stroke: var(--colourEast, "dimgray");
}
#lightSouth {
stroke: var(--colourSouth, "dimgray");
}
#lightWest {
stroke: var(--colourWest, "dimgray");
}
</style>
</head>
<body>
<svg width="70%" height="70%" viewBox="0 0 120 180" class="donut">
<circle class="donut-hole" cx="60" cy="90" r="57.2957795131" fill="dimgray"></circle>
<circle class="donut-centre" cx="60" cy="90" r="53" fill="dimgray"></circle>
<circle class="donut-ring" cx="60" cy="90" r="57.2957795131" fill="transparent" stroke="#333333" stroke-width="32"></circle>
<g class="donut-segment" stroke-width="24" stroke-dasharray="86 274">
<circle id="lightEast" ng-click="send({topic:'east',payload:'toggle'})" cx="60" cy="90" r="57.2957795131" fill="transparent" stroke-dashoffset="45"></circle>
<circle id="lightNorth" cx="60" cy="90" r="57.2957795131" fill="transparent" stroke-dashoffset="135"></circle>
<circle id="lightWest" cx="60" cy="90" r="57.2957795131" fill="transparent" stroke-dashoffset="225"></circle>
<circle id="lightSouth" cx="60" cy="90" r="57.2957795131" fill="transparent" stroke-dashoffset="315"></circle>
</g>
<text x="40%" y="60%" class="chart-label" fill="white"></text>
<g class="button-text" text-anchor="middle" font-family="Calibri,sans-serif" font-size="16" fill="#333333">
<text id="lightNorthText" x="50%" y="22%">N</text>
<text id="lightEastText" x="97%" y="54%">E</text>
<text id="lightSouthText" x="50%" y="85%">S</text>
<text id="lightWestText" x="3%" y="54%">W</text>
</g>
</svg>
</body>
</html>
- growing pains!
)
I notice the flow contains the code in one node only (ui_template) and not the "template node feeding the ui_template node" in my set up.
