@Input properties not initializing when using ViewEncapsulation.ShadowDom

[fireflysemantics]

Did a writeup with Demo Projects here:

https://stackoverflow.com/questions/61225191/angular-custom-element-input-property-not-initializing?noredirect=1#comment108312318_61225191

Tried switching the demo app to ViewEncapsulation.Emulated and that also does not work.

[pkozlowski-opensource]

Stackblitz from the SO question: https://stackblitz.com/edit/angular-custom-elements-hello-emulated?file=src%2Fapp%2Fapp.component.ts

[gkalpak]

The reason this is not working is that gistId="foo" will update the element's HTML attribute, unless it knows the upderlying component has a gistId property. When using a Custom Element, Angular treats it as a regular HTML element (it doesn't know anything about the underlying Angular component), so it will just update the element's gistId attribute (and because HTML is case-insensitive the gistid attribute (all lowercase)).

There are a number of ways to fix this, including:

1. Since this is a common scenario, @angular/elements will automatically map camelCased inputs to the equivalent kebab-cased attributes. So, the component input associated with the gistId property will be set from the value of the gist-id attribute. Thus, when consuming the component as a Custom Element, you can instead use:

   -<fs-gist gistId="some-value"></fs-gist>
   +<fs-gist gist-id="some-value"></fs-gist>

   StackBlitz demo 1

2. You can explicitly tell Angular to bind to a property on the element using the [<propName>]="<expression>" syntax. When using @angular/elements, HTML element properties that correspond to component inputs will be automatically passed through to the component. So, you can do:

   -<fs-gist gistId="some-value"></fs-gist>
   +<fs-gist [gistId]="'some-value'"></fs-gist>

   StackBlitz demo 2

   Notice that 'some-value' is wrapped in single-quotes, because [prop]="..." syntax expects an expression.
   Here, the expression is 'some-value', which evaluates to the string with content some-value.

Based on the above, I am going to close this issue, since everything seems to work as intended.

[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.}