How to dispose/disconnect Arcade Editor in Angular (Web Component)

[todaszy]

IMPORTANT

• [x] My question is related to the samples and content within this repository. For all other issues, open a ticket with Esri Technical Support or post your question in the community forum.
• [x] I have checked for existing issues to avoid duplicates. If someone has already opened an issue for what you are experiencing, please add a 👍 reaction and comment as necessary to the existing issue instead of creating a new one. You can also refer to this repo's troubleshooting guide for hints and suggestions.

Actual behavior

How to properly clean up the component <arcgis-arcade-editor> in Angular? It's a web component as I understand it and it spawns Monaco - how to clean those up? When used in Angular template it seems not to be properly cleaned up.

disconnect() method of web component doesnt exist, but isConnected prop does...

Expected behavior

Remove completely the element.

Reproduction sample

https://github.com/Esri/jsapi-resources/blob/main/component-samples/coding-components/samples/angular/src/app/app.component.ts

Reproduction steps

<arcgis-arcade-editor
  #arcadeEditorComponent
  [script]="script"
  [profile]="profile"
  [testData]="testData"
 </arcgis-arcade-editor>

as you can see [script] is dynamic instead of static as in your code example - when I destroy this template and re-create it the this.script = "new script" wont render in the editor - browser cache cleanup is required. Strange.

Reproduction browser

n/a

Operating System (check https://whatsmyos.com)

n/a

[todaszy]

this.arcadeEditorComponentRef.nativeElement.remove() is this calling the WC disconnectedCallback and cleans up the Monaco?

[todaszy]

In Angular, when I do

<arcgis-arcade-editor
  #arcadeEditorComponent
  script=""
  [profile]="profile"
  [testData]="testData"
 </arcgis-arcade-editor>

        this.profile = profile;
        this.testData = testData;
        this.arcadeEditorComponentRef.nativeElement.script = this.formValue ?? "";

instead of

<arcgis-arcade-editor
  #arcadeEditorComponent
  [script]="script"
  [profile]="profile"
  [testData]="testData"
 </arcgis-arcade-editor>

        this.profile = profile;
        this.testData = testData;
        this.script = this.formValue ?? "";

it works fine (script changes). I suppose this should be documented...

Question about cleanup stands - are there any actions require to properly dispose the component?