3

I am using Angular elements to use my components inside of custom ThingsBoard widgets. The elements are created inside ngDoBootstrap() like this:

const newCustomElement = createCustomElement(CustomElementComponent, {
    injector: this.injector,
});
customElements.define("new-custom-element", newCustomElement);

In a ThingsBoard widget I can then import the compiled JavaScript code of my elements via the "Ressources" tab and instantiate them in the onInit() function of the widget like this:

self.onInit = function() {
    element = document.createElement(
        "new-custom-element");
    self.ctx.$container.append(element);
}

While this works just fine and enables me to use Angular components in my widgets, I noticed a strange problem which sometimes occurs when navigating from a ThingsBoard dashboard state back to another dashboard state. Sometimes after navigating back, my widget would seem to load just fine but then the entire change detection seems to be broken. As long as I do not manually call detectChanges() in my component, the component will sometimes appear to freeze entirely in the UI and no longer react to any user interaction (such as a click event). Only refreshing the page will fix this problem.

What could cause this problem and is there anything I can do in order to fix this?

Chris
  • 1,417
  • 4
  • 21
  • 53

1 Answers1

0

Have you ever tried like this:

ngAfterViewChecked() {
  this.cd.detectChanges();
}

or

constructor(private appRef: ApplicationRef) { }

ngAfterViewInit() {
this.appRef.bootstrap(CustomElementComponent);
}

Good luck.

Behram Bazo
  • 230
  • 2
  • 6