PDA

View Full Version : Button click in Angular



Sean Thomas
14 Sep 2019, 1:22 AM
I have added a Button in the template with:

<ext-button text="Test Button" ui="" shadow="true" iconCls="" arrowAlign="bottom" ></ext-button>

How do I add the equivalent of (click)="MyEvent()"

Help would be much appreciated.

Kind regards

Sean

nbourdeau
17 Sep 2019, 7:05 AM
I have the same question but for Vue. How do we bind to events the "Vue way" ? v-on: ?
I am used to the "handler" option in classic ExtJS but in web components how is it used ?

Sean Thomas
17 Sep 2019, 9:37 AM
I was able to get the button to work by configuring the template as:

<ext-button
text="Normal"
ui=""
shadow="true"
iconCls=""
arrowAlign="bottom"
(ready)="buttonReady($event)">
</ext-button>

And adding the following to the component:

buttonReady = (event) => {


const navButton = event.detail.cmp;


navButton.on('tap', this.log);


}


log = () => {


console.log('tapped');


}

No doubt there is some explanation somewhere! However I have yet to find a concise introduction to the basic strategy for using the components.
Hope this example helps.
Regards
Sean

photon
19 Sep 2019, 2:40 PM
You can use "Vue way", but "ext-button" does not emit "click" event, instead it emits "tap" event that for most of case is similary.

Example:

<ext-button text="Here" v-on:tap="MyFunction"></ext-button>

I guess also applies to angular

Sean Thomas
19 Sep 2019, 3:23 PM
Thank you, much simpler. That helps.
In Angular the following worked fine:

(tap)="buttontest()"

Regards
Sean