add event to custom element

[patrickwasp]

Question

I'd like to emit an event from a custom element. I'm not sure how to best do that. I already emit a javascript event and listen for it within the element, but I'm not sure how to propagate that to the parent of the element.

import nicegui.element
import nicegui.events


class CustomSvg(nicegui.element.Element, component="custom_svg.js"):
    def __init__(self, svg_content: str) -> None:
        super().__init__()
        self._props["svgContent"] = svg_content
        self.on("svg-clicked", self.on_svg_clicked)

    def on_svg_clicked(self, event: nicegui.events.GenericEventArguments) -> None:
        element_info = event.args
        print(f"Clicked element: {element_info}")
        # emit event here?

    def update_svg(self, svg_content: str) -> None:
        self._props["svgContent"] = svg_content
        self.update()

then I'd like to call it from another place something like this

svg="<svg></svg>"
my_custom_svg = CustomSvg(svg).on('on_svg_clicked', lambda: ui.notify(element_info))

[falkoschindler]

Hi @patrickwasp,

Have a look into our "Custom Vue Component" example. You can emit events in JavaScript via $emit(...) and receive them in Python using .on(...)

nicegui/examples/custom_vue_component/counter.js

Line 15 in 3cfb14a

this.$emit("change", this.value);

nicegui/examples/custom_vue_component/counter.py

Line 11 in 3cfb14a

self.on('change', on_change)

[patrickwasp]

I based mine on that example, but for some reason got it in my head to capture the event within the python element part first. Thanks