Components: release Web Components as Angular components

[alizedebray]

Currently the Web Components can be used as is in an Angular application.

However, the component inputs are not computed properly, resulting in such a compiler error every time you bind them to a complex value:

Error: src/app/hierarchy/components/hierachy-family3/hierarchy-family3.component.html:61:28 - error NG8002: Can't bind to 'name' since it isn't a known property of 'post-icon'.
1. If 'post-icon' is an Angular component and it has 'name' input, then verify that it is part of this module.
2. If 'post-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
61                 <post-icon name="{{getSymbol('value')}}"></post-icon>

The current solution would be to declare all Web Components in a separate module with schemas: [CUSTOM_ELEMENTS_SCHEMA] as requested in the error message and explained in this article. To do this, each project has to declare an Angular wrapper for each Web Component it uses.

For this reason, it would be good to use Stencil's ability to generate Angular component wrappers and complement the @swisspost/design-system-components-angular with all components derived from @swisspost/design-system-components.

[oliverschuerch]

Try to find a better solution. If there is no, publish the components-angular package.

[pazoozooCH]

+1
As Angular is used in so many Post projects, design-system components should be first class citizens imho...

[gfellerph]

This feature is considered necessary for delivering form components and would generally be nice because people started to wrap web components with custom angular components.

• Enable Angular component output in the stencil config (compile to existing components-angular project folder if possible)
• Configure value accessor mappings
• Test Angular output in a test application (separate ticket?)