Expand widget content property works differently in ESM vs AMD

[YuriWorkTech]

Migrated from local AMD modules to ES modules via npm. Migration went smoothly with the exception of the Expand widget's content property no longer allows document.getElementById(). Using Angular for reference.

When using AMD for the ability to edit map notes layer, I had the following for html

      <div id="sketchBar" class="sketch-bar">
        <div class="sketch-buttons">
          <div class="esri-widget--button esri-widget esri-interactive action-button esri-icon-map-pin" id="pointButton" type="button" title="Draw point"></div>
          <div class="esri-widget--button esri-widget esri-interactive action-button esri-icon-polyline" id="polylineButton" type="button" title="Draw polyline"></div>
          <div class="esri-widget--button esri-widget esri-interactive action-button esri-icon-polygon" id="polygonButton" type="button" title="Draw polygon"></div>
          <div class="esri-widget--button esri-widget esri-interactive action-button esri-icon-comment" id="textButton" type="button" title="Draw text"></div>
          <div class="esri-widget--button esri-widget esri-interactive action-button esri-icon-trash" id="resetButton" type="button" title="Clear all graphics"></div>
          <div class="esri-widget--button esri-widget esri-interactive action-button esri-icon-trash hidden" id="destroyGraphicButton" type="button" title="Destroy selected graphic"></div>
        </div>
      </div>

 then would initialize an expand widget with 

const sketchExpand = new Expand({
      expandIcon: 'pencil-tip',
      view: this.mapView,
      content: document.getElementById('sketchBar'),
      expandTooltip: 'Sketch',
      group: 'top-right'
    });

Now with the ES modules I keep getting an error stating content must be undefined | string | Node.

So I switched document.getElementById('sketchBar') to document.getElementById('sketchBar').innerHTML which works, but now i have buttons in the expand content that don't work and the html showing up where with the AMD the entire html content would be essentially moved into the expand widget content.

I'm not sure how to proceed. An ES module sample of the map notes layer example would be helpful.

[AndyGup · Accepted solution]

This might be an issue with the Angular syntax that you are using. Here's an example codepen using the ArcGIS ESM CDN (for prototyping-only) that shows getElementById() working: https://codepen.io/andygup/pen/poBxxxw?editors=1000.

With Angular try using "@viewChild": https://angular.io/api/core/ViewChild. And, here's an example usage of viewChild with "@arcgis/core":  https://github.com/Esri/jsapi-resources/blob/main/esm-samples/jsapi-angular-cli/src/app/app.componen...

 @ViewChild('mapViewNode', { static: true }) private mapViewEl!: ElementRef;