Add an Angular wrapper - Githubissues

geospatialem commented 1 year ago

Check existing issues

[X] I have checked for existing issues to avoid duplicates

Description

Determine feasibility and implement an Angular wrapper, similar to the React wrapper to support users working in the Angular framework.

This came up at DevSummit and UC, where users were asking for integration with their Angular applications.

Acceptance Criteria

Criteria taken from Stencil's docs after installing the @stencil\angular-output-target dependency:

Angular component wrappers will be detached from change detection, preventing unnecessary repaints of your web component.
Web component events will be converted to RxJS observables to align with Angular's @Output() and will not emit across component boundaries.
Optionally, form control web components can be used as control value accessors with Angular's reactive forms or [ngModel].
It is not necessary to include the Angular CUSTOM_ELEMENTS_SCHEMA in all modules consuming your Stencil components.

Relevant Info

Additional framework integration support from Stencil's documentation.

Could potentially mitigate the issue identified in https://github.com/Esri/calcite-design-system/issues/7729 cc: @andygup

Which Component

All components

Example Use Case

No response

Priority impact

p3 - want for upcoming milestone

Calcite package

[X] @esri/calcite-components
[ ] @esri/calcite-components-react
[ ] @esri/eslint-plugin-calcite-components

Esri team

Calcite (dev)

omarkawach commented 1 year ago

Watching.

geospatialem commented 1 year ago

Additional testing and review will take place later this week, and should be available as part of next. For now moving to the November milestone.

andygup commented 1 year ago

Will the wrapper be aimed at the latest shipping version of Angular? Angular 17 is scheduled for release next week. I did some limited testing on it with @arcgis/core and didn't see any issues (other than the broken data binding).

We'll also need to do some basic sanity testing with Angular Control Flow and @arcgis/core + components.

github-actions[bot] commented 1 year ago

Installed and assigned for verification.

martinbojnansky commented 1 year ago

Awesome, new typings make the use of the components much easier. When it comes to Angular, it would be great to add support for native reactive forms. It is quite simple to extend the generated directives and I made an example for couple of components. In case you would be interested, I would be keen to contribute and add some tests.

geospatialem commented 12 months ago

Verified with the calcite-components-examples repo with 1.11.0-next.0.

Side note: @martinbojnansky Thanks for the insights, would you be able to file an enhancement request for a follow-up regarding the native reactive forms? We'd love to have additional contributions and tests added if its of interest in filing, too. 💪🏻

martinbojnansky commented 12 months ago

@geospatialem Great! A request https://github.com/Esri/calcite-design-system/issues/8249 created.

Esri / calcite-design-system

Add an Angular wrapper #7860