Allow dispatch of bubbling custom events when using `@angular/elements`

🚀 feature request

Relevant Package

This feature request is for @angular/elements.

Description

When using @angular/elements, outputs are converted to CustomEvents: https://github.com/angular/angular/blob/eb9eebbb45352da6000560ee0988d9d59dce1254/packages/elements/src/create-custom-element.ts#L225-L228

There is no way of listening to the custom events from a grand parent element or component because these custom events don’t bubble as the bubbles option is set to false here:

https://github.com/angular/angular/blob/eb9eebbb45352da6000560ee0988d9d59dce1254/packages/elements/src/utils.ts#L55-L70

It would be nice to figure out a way of listening to custom events in grand parent elements.

Use Case

The app loads dynamic markdown content. This markdown is processed with a third party library like Marked where we add a special link handler that replaces links with our custom elements (using Angular Elements). These elements trigger custom events that we want to handle in the parent component (the one that loaded the markdown).

The general idea is that we can let a 3rd party (non-Angular) library control the DOM and inject our Angular Elements but we want to keep communicating with these elements without having to dispatch bubbling events manually or using an indirection like a provider or state management etc…

Solutions

Solution A

1. Create a new CustomEventEmitter where we can configure bubbles and cancelable:

new CustomEventEmitter({bubbles: true, cancelable: false})

We can’t use EventEmitter because bubbles and cancelable will be simply ignored and confusing when not using Angular elements

1. Change ComponentNgElementStrategy in order to handle CustomEventEmitter differently instead of merging all emitters: https://github.com/angular/angular/blob/eb9eebbb45352da6000560ee0988d9d59dce1254/packages/elements/src/component-factory-strategy.ts#L50

2. Change createCustomElement in order to handle bubbles and cancelable: https://github.com/angular/angular/blob/eb9eebbb45352da6000560ee0988d9d59dce1254/packages/elements/src/create-custom-element.ts#L225-L228

3. Change createCustomEvent to allow the control of bubbles and cancelable: https://github.com/angular/angular/blob/eb9eebbb45352da6000560ee0988d9d59dce1254/packages/elements/src/utils.ts#L55-L70

4. [OPTIONAL] Should we deprecate EventEmitter usage with Angular elements? Allowing both can be confusing.

Solution B

Create a new CustomEventEmitter which is an EventEmitter of type EventEmitter<{bubbles?: boolean, cancelable?: boolean, detail?: T}> so every event can have a different bubbling strategy… but that would be a surprising behavior so I am not a big fan of this one.

Contribution

I’ll be more than happy to contribute with a PR if the solution is suitable.

Workaround

Trigger the event manually:

elementRef.nativeElement.dispatchEvent('myCustomEvent', {bubbles: true, detail: 'data'})

Somewhat related issues

https://github.com/angular/angular/issues/2296

[csakis]

This issue was raised over 6 years ago. It seems that everybody agrees that this is a desirable feature to have and @yjaaidi’s solution is a good one. How long does it take to approve it by the Angular team?

[angular-robot[bot]]

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.