Angular elements input property bindings with ng-container wrapper problems

🐞 bug report

Affected Package

The issue is caused by package @angular/elements or @angular/core

Is this a regression?

Don’t know

Description

A clear and concise description of the problem…

When using @angular/elements and you have an outer/inner component, with an ng-container wrapper, the input property bindings don’t apply to the element, despite getters/setters running. If you remove the wrapping ng-container then the input bindings work.

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-ivy-inner-outer-element-cd

🌍 Your Environment

Angular Version:



@angular/animations 11.0.8
@angular/common 11.0.8
@angular/compiler 11.0.8
@angular/core 11.0.8
@angular/elements 11.0.8
@angular/forms 11.0.8
@angular/platform-browser 11.0.8
@angular/platform-browser-dynamic 11.0.8
@angular/router 11.0.8
@webcomponents/custom-elements 1.4.3
rxjs 6.6.3
tslib 2.1.0
zone.js 0.11.3

1 possible answer(s) on “Angular elements input property bindings with ng-container wrapper problems

  1. The problem stems from the fact that you use the same string for both the Angular selector of the components and the tag name of the corresponding Custom Elements.

    Since you are using the Custom Elements in an Angular app, my-outer/my-inner can match both the Angular components and the defined Custom Elements. This, in turn, can lead to trying to apply the same component twice on the same DOM element (including processing its contents twice) and mess things app.

    If you switch to using different tag names for the Custom Elements than the components’ selectors, everything works fine (afaict): Updated StackBlitz

    I am going to close this, since everything seems to work as expected, but feel free to continue the discussion below.