Есть ли способ отобразить выпадающее меню с различными параметрами в ячейке таблицы, используя машинописный текст в угловой сетке

Question

На приведенном ниже изображении я хочу отобразить опции = {завершено}, когда статус завершен, и аналогично опции = {запланировано, приостановлено, прервать}, когда статус запланирован, и это также должно изменить метку Статус к выбранной опции

Я создал пользовательский компонент:

custom-actionFormatter. component.html

<!------------------custom-actionFormatter.component.html----------------------->

    <div id="myDrop" style="position:absolute; z-index:12000;    margin: 2px 1000px 0;">
        <ul class="mainDropdown">
            <li class="dropdownCompleted" id="completed">
                <ul>
                    <li>{{ dataContext.Status }}</li>
                    <li role="separator" class="divider"></li>
                    <li>AAAAA</li>
                    <li>BBBBB</li>
                    <li role="separator" class="divider"></li>
                </ul>
            </li>
            <li class="dropdownScheduled" id="scheduled">
                <ul>
                    <li>{{ dataContext.Status }}</li>
                    <li role="separator" class="divider"></li>
                    <li>CCCCC</li>
                    <li>DDDDD</li>
                    <li role="separator" class="divider"></li>
                </ul>
            </li>
        </ul>
    </div>

custom-actionFormatter.component.ts

/***************************custom-actionFormatter.component.ts**************/

    import { Component, OnInit, ViewEncapsulation } from "@angular/core";
    import * as $ from "jquery";

    @Component({
      templateUrl: "./custom-actionFormatter.component.html",
      stylstrong texteUrls: ["./custom-actionFormatter.component.css"],
      encapsulation: ViewEncapsulation.None
    })
    export class CustomActionFormatterComponent implements OnInit {
      parent: any; // parent component context
      row: number;
      dataContext: any;
      dropdownId = "myDrop";
      dropDownToggleId = "toggleDrop";

      constructor() {

      }

      ngOnInit() {

       if (this.dataContext.Status === "Completed") {
       document.getElementById("completed").style.display == 'block';
       document.getElementById("scheduled").style.display == 'none';
    }
    if (this.dataContext.Status === "Scheduled") {
       document.getElementById("completed").style.display == 'none';
       document.getElementById("scheduled").style.display == 'block';
    }
    }
    }

Это главная страница, где я хочу отобразить раскрывающееся меню:

running-schedule.component.ts

/***************************running-schedule.component.ts**************/

    import {
      Component,
      OnInit,
      Injectable,
      ViewEncapsulation,
      HostListener
    } from "@angular/core";
    import { Headers, RequestOptions } from "@angular/http";
    import { Http, Response } from "@angular/http";

    import {
      Column,
      GridOption,
      AngularGridInstance,
      Filters,
      BsDropDownService,
      ExtensionName,
      FieldType,
      Formatter,
      Formatters,
      Editors,
      Statistic,
      GridStateChange,
      GridOdataService,
      OperatorType,
      OnEventArgs,
      EditorValidator,

      SelectOption,
      AngularUtilService
    } from "../../modules/angular-slickgrid";
    import { RemoteServerCommunicationService } from "./../../Services/ListView/RemoteServerCommunication.service";
    import { GlobalDataService } from "./../../Services/global-data.service";
    import { PathStorageService } from "./../../Services/ListView/path-storage.service";
    import settingPayLoadProcessing from "./../../../assets/data/applicationSetting.json"
    import{CustomActionFormatterComponent}from '../custom-actionFormatter/custom-actionFormatter.component';
    import * as $ from "jquery";
    Component({
      selector: "app-running-schedule",
      templateUrl: "./running-schedule.component.html",
      styleUrls: ["./running-schedule.component.css"],
      encapsulation: ViewEncapsulation.None
    })
    @Injectable()
    export class RunningScheduleComponentMenu implements OnInit {
    columnDefinitions: Column[] = [];
      gridOptions: GridOption = {};
      dataset = [];
    constructor(
        private http: Http,
        private remoteservercommunicationservice: RemoteServerCommunicationService,
        public pathstorageservice: PathStorageService,
        private globaldataservice: GlobalDataService,
        private bsDropdown: BsDropDownService,
        private angularUtilService: AngularUtilService
      ) { }

     ngOnInit() {
       this.defineGrid();
    }

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

     defineGrid() {
        this.columnDefinitions = [

          {
            id: "Status",
            name: "Status",
            field: "Status",
            minWidth: 100,
            filterable: true,
            type: FieldType.string,
            formatter: Formatters.bsDropdown,
            params: { label: 'Status' },
            filter: {
              collection: [
                { value: "", labelKey: "All" },
                { value: "Completed", labelKey: "Completed" },
                { value: "Abort", labelKey: "Abort" },
                { value: "Scheduled", labelKey: "Scheduled" },
                { value: "Suspended", labelKey: "Suspended" },
                { value: "Inprogress", labelKey: "Inprogress" }
              ],
              model: Filters.singleSelect
            },
            onCellClick: (e: Event, args: OnEventArgs) => {;
              this.bsDropdown.render({
                component:CustomActionFormatterComponent ,
                args,
               offsetLeft: 92,
                offsetDropupBottom: 15,
                parent: this, // provide this object to the child component so we can call a method from here if we wish
              });
            }
        }
        ];
        this.gridOptions = {
          asyncEditorLoading: false,
          autoCommitEdit: false,
          enableAutoResize: true,
          autoEdit: true,
        editable: true,
          autoResize: {
            containerId: "demo-container",
            sidePadding: 15,
            maxHeight: this.scrHeight - 125
            // minHeight: 300,
          },
          // true by default
          enableCellNavigation: true,
          enableColumnPicker: true,
          enableExcelCopyBuffer: true,
          enableCheckboxSelector: true,
          enableFiltering: true,
          enableAsyncPostRender: true,
          asyncPostRenderDelay: 0,
          alwaysShowVerticalScroll: false,
          params: {
            angularUtilService: this.angularUtilService // provide the service to all at once (Editor, Filter, AsyncPostRender)
          },
          checkboxSelector: {
            // you can toggle these 2 properties to show the "select all" checkbox in different location
            hideInFilterHeaderRow: false,
            hideInColumnTitleRow: true
          },
          rowSelectionOptions: {
            // True (Single Selection), False (Multiple Selections)
            selectActiveRow: false
          },
          pagination: {
            pageSizes: [this.page],
            pageSize: null, //defaultPageSize,
            totalItems: 0
          },
          presets: {
            pagination: { pageNumber: 1, pageSize: this.page }
          },
          backendServiceApi: {
            service: new GridOdataService(),
            process: query => this.getCustomerApiCall(query),
            postProcess: response => {
              this.getCustomerCallback(response);
            }
          }
        };
      }
    }
    }