Javascript function is not defined - Error

[pavangayakwad]

Using it inside the angular component allowing users to write their own html with javascript functions.

The template to be rendered.

<script type="text/javascript">
function fnDone(v){
alert(v);
}
</script>

{% for d in data %}
<div>
{{d.title}}
<button onclick="fnDone(d.title)">{{d.title}}</button>
</div>
{% endfor %}

In the backend, Initialized the engine,

_UIengine = new Liquid({
    cache: true
  });

...and rendered the template with the data

let data = {/* received from API */ };

this._UIengine.parseAndRender(this._template, data)
.then(html => this.assignRenderedHtml(html));

The HTML page is coming up nicely however when I click on the button, receiving the fnDone is not defined error.

Here is the rendered HTML

What am I doing wrong here? Please assist.

[harttle]

I believe it should be onclick="()=>fnDone(d.title)"