Angular: Use Service on Button Event

[bastiW]

Hi,

does anyone know how to call a service from a Kolibri event?

Code Sandbox

	constructor(private heroService: HeroService) {}

	onKolibriButtonClick() {
		console.log('Kolibri event')
		this.heroService.hero('onKolibriButtonClick')
	}

	onButtonClick() {
		console.log('Button event')
		this.heroService.hero('onButtonClick')
	}

<kol-button [_on]="{onClick: onKolibriButtonClick }" _label="Klick mich!" ></kol-button>
<button (click)="onButtonClick()" >Native Button</button>

I receive an error when clicking the Kolibri Button:

ERROR TypeError: Cannot read properties of undefined (reading 'hero')
    at Object.onKolibriButtonClick [as onClick] (main.js:506:26)
    at KolButtonWc.onClick (vendors-node_modules…e-23ddf8.js:515:451)
    at _ZoneDelegate2.invokeTask (main.js:21720:175)
    at main.js:61281:49
    at AsyncStackTaggingZoneSpec.onInvokeTask (main.js:61281:30)
    at _ZoneDelegate2.invokeTask (main.js:21720:58)
    at Object.onInvokeTask (main.js:61592:25)
    at _ZoneDelegate2.invokeTask (main.js:21720:58)
    at Zone3.runTask (main.js:21519:41)
    at ZoneTask2.invokeTask [as invoke] (main.js:21794:30)

[bastiW]

Just found the solution:

<kol-button [_on]="buttonCallbacks" _label="Klick mich - callback" ></kol-button>

      import {ButtonCallbacksPropType} from "@public-ui/components";

	buttonCallbacks: ButtonCallbacksPropType<any> = {
		onClick: () => {
			console.log('Button event')
			this.heroService.hero('buttonCallbacks - click')
		}
	};

• This would be nice to be better documented (currently there are no Angular docs)

Code Sandbox