Sitelet https://github.com/angular/angular/pull/70334
Skip to content

fix(elements): support exposed host directive bindings - #70334

Open
97Fakhreddine wants to merge 1 commit into
angular:mainfrom
97Fakhreddine:fix/53193-elements-host-directives
Open

fix(elements): support exposed host directive bindings#70334
97Fakhreddine wants to merge 1 commit into
angular:mainfrom
97Fakhreddine:fix/53193-elements-host-directives

Conversation

@97Fakhreddine

Copy link
Copy Markdown
Contributor

PR Checklist

Please check if your PR fulfills the following requirements:

No documentation changes are required because this fixes existing custom-element behavior without introducing a new public API.

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • angular.dev application / infrastructure changes
  • Other... Please describe:

What is the current behavior?

When a component that exposes host directive inputs or outputs is converted to a custom element with createCustomElement, those exposed bindings are not included in the custom-element API.

As a result, exposed host directive inputs cannot be set through element properties or attributes, and exposed host directive outputs are not dispatched as custom-element events.

Issue Number: #53193

What is the new behavior?

Custom elements now include host directive bindings that are explicitly exposed by the component.

The implementation:

  • reuses Angular's runtime host directive resolution instead of duplicating host directive traversal and alias handling;
  • exposes host directive input aliases as custom-element properties and observed attributes;
  • keeps input writes routed through ComponentRef.setInput, preserving Angular's input transforms, signal-input behavior, and change detection;
  • resolves host directive instances from the component injector for input reads and output subscriptions;
  • dispatches exposed host directive outputs using their public aliases;
  • does not expose host directive inputs or outputs that are not part of the component's public host-directive API.

Regression tests cover exposed input aliases, input transforms, values set before and after connection, signal input getters, output events, and hidden host directive inputs.

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

Fixes #53193.

Expose host directive inputs and outputs when components are converted to custom elements. Reuse Angular's existing host directive resolution and input routing so aliases, transforms, signal inputs, and output events preserve their runtime semantics.

Fixes angular#53193
@pullapprove
pullapprove Bot requested a review from crisbeto August 21, 2026 21:37
@angular-robot angular-robot Bot added the area: elements Issues related to Angular Elements label Aug 21, 2026
@ngbot ngbot Bot added this to the Backlog milestone Aug 21, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: elements Issues related to Angular Elements

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Component with hostDirectives doesn't bind input outputs of directive when used as custom element

1 participant