Arcgis Javascript API 4.14 Moving marker symbol in the Graphics Layer in Angular 8 is not smooth

[MarkGlass]

We have an app with a simple implementation of ESRI Arcgis Javascript API (arcgis-js-api v4.14.0) with esri-loader v2.13.0.We are using Angular 8 and JDK 11, .

The application displays a topographical  map in an Angular dialog window. The user may add/delete marker symbols on the map using a left mouse-click. The user may also move the marker symbol by left mouse-click on the marker symbol and dragging the marker symbol. 

My Question has to do with the dragging behavior. It's choppy and easily lost if the user moves too fast. 

    return loadModules([
      'esri/Map',
      'esri/views/MapView',
      'esri/Graphic',
      'esri/layers/GraphicsLayer',
    ])
      .then(([Map, MapView, Graphic, GraphicsLayer]) => {
.....          
         this.mapView.on('drag', (event:DragEvent) => {
            event.stopPropagation();

            this.mapView.hitTest(event)
              .then((response) => {
                if (response.results.length > 1) {
                  const graphic = response.results[0].graphic;

                  const mapPoint = response.results[0].mapPoint;
                  const location = this.getLocationFromMapPoint(mapPoint);
                  const pointGraphic: esri.Graphic = this.getGraphic(Graphic, location);
                  this.removePin(graphic);
                  this.addPin(pointGraphic);
                }
              });
          })

removePin(graphic) removes the pin(i.e. marker symbol) from the graphic layer and addPin places a new pin in the graphic layer.

Is there a better way to move the marker symbol?  

[ReneRubalcava]

If you are looking to move graphics around the map, the easiest way is to use the SketchViewModel, it can manage that for you.

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.ht...

[MarkGlass]

Thank you for your quick response. I took a look at the link you sent back and tried to envision how it might work with what I've done already. I did another search for examples based on Sketchview but am still not able to see how I can use SketchViewModel to resolve my problem. 

Can you provide an example how SketchViewModel can be used in conjunction with a WebView using JSAPI 4.14?

Thank you

[BlakeTerhune]

Check this one out.

Sketch update validation | ArcGIS API for JavaScript

[AndyGup · Accepted solution]

If the SketchViewModel runs slower in Angular than in a vanilla JS app, and there aren't any errors in the console, it's possible the performance issue is related to zone.js and Angular's built-in component change detection. There are two primary ways to try and address these types of issues.

You can move to a manual change detection pattern within your map component, there is a lot of info about this on the web, here is one example of how to do it.

Or, you can also try running your code outside of the Angular "zone", similar to this super basic, pseudo-example:

    this.zone.runOutsideAngular(() => {
      // Initialize MapView here
      this.initializeMap().then(() => {
        // The map has been initialized
        . . .
        // For non-map-related component events, run them outside the Zone
        this.zone.run(() => {
          console.log('mapView ready: ');
        });
      });
    });