Skip to content

Event handling

Ben Grynhaus edited this page Mar 17, 2019 · 1 revision

While there is no special handling in the ReactRenderer for event handlers, usually wrapper libraries will use the ReactWrapperComponent to simplify their wrapper components authoring. In that case, in addition to any usual @Output that the wrapper component may have, you can specify any arbitrary event handler that React supports as an (output), and get that emitted as usual. e.g.:

<fab-checkbox (onFocus)="handleFocus($event)"></fab-checkbox>

This reduces boilerplate code that wrapper components need to write, in addition to supporting any arbitrary event that the underlying DOM element supports.

This mechanism is achieved using a fork of the the geteventlisteners package (see renderer/geteventlisteners.ts for the full implementation and more details).

This monkey-patches the Element prototype in order to capture event listener registrations done by Angular (since there is no public API that covers that as far as we could find. Changes are welcomed in this area).