Is it possible to create a WIDGET for Angular 8+ ?

[MichaelK1]

Is it possible to create a WIDGET for Angular 8+ ?

 I saw It's possible to create a React and VueJs component and use it as a widget. But is it possible to use Angular @ Component for creating custom widgets.

Extra question: Is it possible to use an Angular component for displayContent (popupTemplate)

THANKS!

[TommyBramble]

 I saw It's possible to create a React and VueJs component and use it as a widget. But is it possible to use Angular @ Component for creating custom widgets.

Yes...if I understand your question correctly.

You can use Angular to create your own custom components (whatever you want to call them; widgets, modules, etc). These components you create will not be exactly the same as the ArcGIS for JavaScript Widgets that are built around Dojo, but you can create custom components in Angular that use the ArcGIS for JavaScript API in the component logic.

Extra question: Is it possible to use an Angular component for displayContent (popupTemplate)

Yes...again, if I understand your question correctly, you can use Angular (or any other client-side framework) to set the 'content' property of the popupTemplate.

You will need at least a basic/introductory understanding of JavaScript (or TypeScript), the Angular framework, and ArcGIS for JavaScript API to accomplish these things.

[MichaelK1]

What I mean, is it possible to use Angular to create a custom widget like it's possible to create a React component and  : https://developers.arcgis.com/javascript/latest/sample-code/widgets-frameworks-react/ or like vue: https://developers.arcgis.com/javascript/latest/sample-code/widgets-frameworks-vue/

And create a component instance:

const widget = new HelloWorld({ firstName: names[nameIndex].firstName, lastName: names[nameIndex].lastName, container: "widgetDiv" });

 and add it like:

this.view.ui.add(widget, position);

[TommyBramble]

Gotcha, I understand now. Thanks for the context.

Yes, you should be able to do this. In the samples for Vue and React they are not passing in the entire widget to the view. They are only passing in a reference to the DOM element that the widget uses. In your case it would be something like:

this.view.ui.add(document.getElementById('widgetDiv'), position);

or maybe this would work, but I haven't used Angular for a year or two:

this.view.ui.add(widget.container, position);

Good luck. 

[AndyGup]

We don't have any examples of custom widgets in Angular, but you can build them. How you build them depends on whether you are using JavaScript or TypeScript. And, it will be easier if you are using Angular 11+ because then you can use the APIs ES modules (npm @arcgis/core)

Here's another conversation about TypeScript widgets: https://community.esri.com/t5/arcgis-api-for-javascript/handling-and-rendering-in-a-widget/m-p/10739.... and scroll down towards the bottom.

A couple of items to note:

* Build your widget in .tsx (if using TypeScript + Angular)

* In tsconfig.json set "jsx": "react", "jsxFactory": "tsx" 

[ForrestLin]

Could you please provide an examples of custom widgets (4.27) in Angular?