Context Menu for angular-slickgrid (angular 7)

gistfile1.txt

Dynamically set columns - data from firestore
const keys = Object.keys(dt);
keys.forEach(function(key,i){
  if(key !== 'id'){ // The id column is removed
    this.columnDefinitions.push({ id: key, name: key.toUpperCase(), field: key, sortable: true });
  }
}.bind(this))
console.log(this.columnDefinitions);
this.angularGrid.slickGrid.setColumns(this.columnDefinitions)

Context Menu
<ul id="contextMenu" style="display:none;position:absolute">
  <b>Set Goal:</b>
  <li data="Low">Low</li>
  <li data="Medium">Medium</li>
  <li data="High">High</li>
</ul>
HTML code
<angular-slickgrid gridId="grid1"
(onAngularGridCreated)="angularGridReady($event)"
(sgOnContextMenu)="contextMenu($event.detail.eventData)"
[gridOptions]="gridOptions"
[dataset]="dataset">
</angular-slickgrid>

Typescript code
angularGridReady(angularGrid: AngularGridInstance) {
  this.angularGrid = angularGrid;
}

contextMenu(e){
  console.log('Event ',e);
  e.preventDefault();
  var cell = this.angularGrid.slickGrid.getCellFromEvent(e);
  var x = e.pageX - 250;// $(e.target).offset().left;
  $("#contextMenu")
      .data("row", cell.row)
      .css("top", e.pageY)
      .css("left", x)
      .show();
  $("body").one("click", function () {
    $("#contextMenu").hide();
  });
}