Angular reactive forms with standalone components

[kentyunge]

Our design system has a handful of custom form elements that utilize valueAccessorConfigs in stencil.config. This works fine when exporting with dist and older versions of Angular. However, as we attempt to support standalone components in the latest Angular versions, the generated accessors don't appear to work by default. I was able to get it to work by exporting each accessor individually, however, the consuming angular application then needs to import the component (I.E. ds-input) along with the correct corresponding value accessor (I.E. text-value-accessor or number-value-accessor, etc.). Is there a better way to configure this? This method is quite cumbersome for the end user.

example public-api.ts

export { TextValueAccessor } from './lib/stencil-generated/text-value-accessor';
export { SelectValueAccessor } from './lib/stencil-generated/select-value-accessor';
export { RadioValueAccessor } from './lib/stencil-generated/radio-value-accessor';
export { BooleanValueAccessor } from './lib/stencil-generated/boolean-value-accessor';
export { NumericValueAccessor } from './lib/stencil-generated/number-value-accessor';

export * from './lib/stencil-generated/components';```

[christian-bromann]

@kentyunge thanks for raising the issue. I unfortunately can't speak much about Angular but whatever we can do to improve the Angular Output Target to improve this workflow is worth exploring. If you have any ideas for enhancements, please keep us posted.