How to call a function in polymer 2.0 on button onclick or anchor tag click? - polymer-2.x

Question

I am seeing functionality like Compute function where i can use a function to compute same thing and then retrun something to that textcontent area but how to use them on button onclick or anchor onclick .
for example :
<dom-module id="x-custom">
<template>
My name is <span>[[_formatName(first, last)]]</span>
</template>
<script>
class XCustom extends Polymer.Element {
static get is() {return 'x-custom'}
static get properties() {
return {
first: String,
last: String
}
}
_formatName(first, last) {
return `${last}, ${first}`;
}
}
customElements.define(XCustom.is, XCustom);
</script>
</dom-module>
In this case the _formatName is manipulated in and we get resultant in html.
But how to to in button onclick and
So that i can manipulate for send some http request .
Also manipulate some data inside the function .
Polymer 2.0

Answer 1

I got the answer . First of all for two way binding you also check the polymer 1.0 doc for data binding that is in brief .
And then you can read polymer 2.0 doc but i don't see more for data binding event there.
I will say read both.
https://www.polymer-project.org/1.0/docs/devguide/templates
https://www.polymer-project.org/2.0/docs/devguide/templates
This have example for custom event .
https://www.polymer-project.org/2.0/docs/devguide/events.html#custom-events
<dom-module id="x-custom">
<template>
<button on-click="handleClick">Kick Me</button>
</template>
<script>
class XCustom extends Polymer.Element {
static get is() {return 'x-custom'}
handleClick() {
console.log('Ow!');
}
}
customElements.define(XCustom.is, XCustom);
</script>
</dom-module>
Also if you want argument to pass to the function you can do this.
<dom-module id="x-custom">
<template>
<button on-click="handleClick" data-args="arg1,arg2">Kick Me</button>
</template>
<script>
class XCustom extends Polymer.Element {
static get is() {return 'x-custom'}
handleClick(e) {
console.log('Ow!');
console.log(e.target.getAttribute('data-args'));
// now you got args you can use them as you want
}
}
customElements.define(XCustom.is, XCustom);
</script>
</dom-module>