The Widgets Development Guide of ThingsBoard describes how to develop widgets with JavaScript hooked to the Widget API.
For the development of reusable widget component, I'd like to develop TypeScript Angular components that can be used within widgets, similarly to how Angular components are used in built-in (default) widgets.
For example, here is the template+controller of the Entities hierarchy widget:
<tb-entities-hierarchy-widget
[ctx]="ctx">
</tb-entities-hierarchy-widget>
self.onInit = function() {
}
self.onDataUpdated = function() {
self.ctx.$scope.entitiesHierarchyWidget.onDataUpdated();
}
self.typeParameters = function() {
return {
dataKeysOptional: true
};
}
self.actionSources = function() {
return {
'nodeSelected': {
name: 'widget-action.node-selected',
multiple: false
}
};
}
self.onDestroy = function() {
}
In this widget, everything is delegated to an entitiesHierarchyWidget Angular component with a tb-entities-hierarchy-widget selector.
It seems that the thingsboard-extensions repository can be used for this purpose but the process is largely undocumented.
How can I create a new Angular component and use it within a custom ThingsBoard widget?
