Intercepting Events/Properties on Renders

[mhevery]

Goal

Have a way to intercept events/properties on Renderer so that we could do things like:

• Create custom event handlers. ie, touch events, swipe, etc
• Create custom DOM elements / events / properties for things like jQuery/EXT js/ other widget library integration

Simple event integration

<div (ionic-swipe)="...">

Here it we need to be able to register custom ionic-swipe event.

<jquery-ui type="data-picker" (select)="..." [min-date]='exp"></jquery-ui>

Here we need to know that we need to create a custom element jquery-ui which is just a div upgraded with jquery-ui library to a date-picker. The system then needs to be able to deduce that the jquery-ui has a select event and a minDate property on it. These bindings/events are not registered using normal DOM api but using custom API.

Proposal

Have a way to register synthetic elements, events, and properties with the DOMRenderer

Requirements:

• Needs to be done on the UI Thread
• Needs to be fast, as we create a lot of bindings/events/elements
• Needs to be element scoped since different elements will have different events/properties
• Should integrate with schema, so that the compiler can easily throw an typos
  • Integration with schema is what will allow us to bridge with web-components

API:

The DOMRenderer will have additional API for registering "interceptors" per element name. This will allow custom code to be run on element creation, event registration and property updates.

[mhevery]

/cc @tbosch @adamdbradley

[tbosch]

Like it.
Note that the schema registry is only used inside of compilation which is probably offline. I.e. these "interceptors" need 2 parts:

• 1 for the runtime which is registered at the DomRenderer
• 1 for compilation which is registered at the SchemaRegistry

[pkozlowski-opensource]

Yes! This would allow us to easily have custom logic for "troublesome" properties and fix the following issues:

• [src] attribute the first time it calls to an undefined endpoint #3765
• add special case for href to allow optionally not including the attribute #2213

[pkozlowski-opensource]

Another case where interceptors would be useful: #6137

[splincode]

@mhevery Is the issue relevant?

[vthinkxie]

there is a POC of Renderer Interception here: https://github.com/trotyl/angular-contrib/tree/master/projects/core/src/render-intercept
will angular support it officially?

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}