How to use Angular Elements with Form Control?
- Dominant language
- TypeScript
- Stars
- 101k
- Forks
- 27.5k
- Avg merge
- 1d 19h
- Merged PRs (30d)
- 288
Description
### Describe the problem that you experienced
Hello,
Since I cannot find any information online about it - I resort to asking straight from the source.
How to convert Angular component that uses Control Value Accessor to Web Component and use it correctly? Is there any official way uncovered in the documentation?
Main issues I have seem to be:
a) Provider array in component with following construct


causes this NullInjectorError after conversion to Web Component and simply consuming it in index.html demo file

(we can assume here that conversion of other elements - without any items in providers array - are working correctly; this was succesful and relatively easy)
b) Actual consumption of converted element via formControl - I found conflicting information that Web Component can or absolutely cannot be used with Form Control, some info about adding ngDefaultControl directive to Web Component (to every element every time? seems weird but it does nothing for me either way OOTB).
Please, let's settle what is the proper approach here as the documentation seems lacking such information. It would be greatly appreciated by everyone who's trying to convert Angular lib to be widely used across platforms and frameworks.
Cheers!
### Enter the URL of the topic with the problem
https://angular.io/guide/elements#typings-for-custom-elements
### Describe what you were looking for in the documentation
_No response_
### Describe the actions that led you to experience the problem
_No response_
### Describe what you want to experience that would fix the problem
_No response_
### Add a screenshot if that helps illustrate the problem
_No response_
### If this problem caused an exception or error, please paste it here
_No response_
### If the problem is browser-specific, please specify the device, OS, browser, and version
_No response_
### Provide any additional information here in as much as detail as you can
_No response_
Contributor guide
Research direction
Start with the Angular Elements guide at angular.io/guide/elements#typings-for-custom-elements and review the reported NullInjectorError and FormControl usage questions. Determine the officially supported approach for ControlValueAccessor-based components converted to web components, then update the documentation to explain the provider and form-control behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- documentation
- Issue type
- Documentation
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100