Skip to content

refactor(compiler): support passing children to foreign components#68996

Draft
leonsenft wants to merge 5 commits into
angular:mainfrom
leonsenft:foreign-component-children
Draft

refactor(compiler): support passing children to foreign components#68996
leonsenft wants to merge 5 commits into
angular:mainfrom
leonsenft:foreign-component-children

Conversation

@leonsenft
Copy link
Copy Markdown
Contributor

This is based on #68787

Previously, any children nested inside a foreign component were ignored during template ingestion. With this change, the compiler now:

  1. Identifies when a foreign component has children in the template AST.
  2. Compiles these children into a separate template view (using the standard TemplateOp).
  3. Passes a ɵɵforeignContent expression under the children prop inside the foreign component's props object.

At runtime, the new ɵɵforeignContent(index) instruction instantiates the template at the specified slot index in memory (detached from the DOM), extracts its root DOM nodes, and returns them. These root nodes are then passed directly to the foreign component's props.children so they can be rendered by the foreign framework.

The instantiated children view is registered in the parent LView's child tree, ensuring its change detection and destruction are managed automatically as part of the standard Angular view tree lifecycle.

leonsenft added 5 commits May 28, 2026 10:26
Add descriptive text to foreign view head and tail comments in dev mode to
assist in debugging.
Implement the `ɵɵforeignComponent` instruction to render foreign components
(components from other frameworks) inside Angular templates. The instruction
creates a host LContainer, instantiates a foreign view, executes the foreign
component's RENDER function, inserts the returned native DOM nodes, and
registers the disposal hook.

Add unit tests to verify element rendering, property passing, dependency
injection, and disposal on destruction.
…nt props

Avoid triggering the `interpolated_signal_not_invoked` diagnostic when
a signal is passed directly as a property binding to a foreign
component. Foreign components may accept signals directly, so they
should not be flagged as uninvoked in this context.

To support testing this, the typecheck testing infrastructure was
updated to allow defining mock foreign components in the test setup.
Previously, the `ɵɵforeignComponent` instruction set the `currentTNode`
state during the first template creation pass (via `getOrCreateTNode`),
but failed to do so on subsequent instantiations when the `TNode` was
accessed from cache.

This resulted in the global `currentTNode` state remaining unchanged from
the previous instruction. When closing a parent element (e.g., via
`ɵɵelementEnd`), this mismatched state caused assertion failures
because the framework attempted to close the wrong parent node.
This change fixes the issue by calling `setCurrentTNode(tNode, false)`
when the foreign component's `TNode` is retrieved from the cache.
Previously, any children nested inside a foreign component were ignored
during template ingestion. With this change, the compiler now:
1. Identifies when a foreign component has children in the template AST.
2. Compiles these children into a separate template view (using the
   standard TemplateOp).
3. Passes a `ɵɵforeignContent` expression under the `children` prop
   inside the foreign component's `props` object.

At runtime, the new `ɵɵforeignContent(index)` instruction instantiates the
template at the specified slot index in memory (detached from the DOM),
extracts its root DOM nodes, and returns them. These root nodes are then
passed directly to the foreign component's `props.children` so they can
be rendered by the foreign framework.

The instantiated children view is registered in the parent LView's
child tree, ensuring its change detection and destruction are managed
automatically as part of the standard Angular view tree lifecycle.
@leonsenft leonsenft added area: core Issues related to the framework runtime area: compiler Issues related to `ngc`, Angular's template compiler target: minor This PR is targeted for the next minor release labels May 28, 2026
@ngbot ngbot Bot added this to the Backlog milestone May 28, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: compiler Issues related to `ngc`, Angular's template compiler area: core Issues related to the framework runtime target: minor This PR is targeted for the next minor release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant