The change event is not getting triggered in case syncfusion ejs-multiselect control is used in Ag-Grid custom cell editor

I am using syncfusion ejs-multiselect control as a custom cell editor in Ag-grid. In this the change event is not getting fired when multi-select value is changed and some other cell is clicked. How ever if clicked out of Ag-grid, change event is getting fired. (i am using in my existing project) As in case of creating a new project and trying same, it is working fine. Following are package.json file(in case it is of any version issue)

package.json:

{
      "name": "portal",
      "version": "0.0.0",
      "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
      },
      "private": true,
      "dependencies": {
        "@agm/core": "^1.0.0-beta.5",
        "@angular-devkit/core": "0.0.29",
        "@angular-devkit/schematics": "^7.1.1",
        "@angular/animations": "~7.2.0",
        "@angular/cdk": "^7.1.1",
        "@angular/common": "~7.2.0",
        "@angular/compiler": "~7.2.0",
        "@angular/core": "~7.2.0",
        "@angular/forms": "~7.2.0",
        "@angular/http": "^6.0.3",
        "@angular/material": "^6.2.1",
        "@angular/platform-browser": "~7.2.0",
        "@angular/platform-browser-dynamic": "~7.2.0",
        "@angular/router": "~7.2.0",
        "@markpieszak/ng-application-insights": "^7.0.3",
        "@syncfusion/ej2-angular-calendars": "^17.2.49",
        "@syncfusion/ej2-angular-dropdowns": "^17.3.14",
        "@syncfusion/ej2-angular-inputs": "^17.2.52",
        "@syncfusion/ej2-angular-richtexteditor": "^17.1.43",
        "ag-grid-angular": "^21.2.2",
        "ag-grid-community": "^21.2.2",
        "ag-grid-enterprise": "^21.2.2",
        "angular2-uuid": "^1.1.1",
        "applicationinsights-js": "^1.0.19",
        "bootstrap": "^3.3.7",
        "core-js": "^2.5.4",
        "indexeddb-angular": "^0.1.8",
        "jquery": "^3.3.1",
        "lodash": "^4.17.10",
        "ng2-slim-loading-bar": "^4.0.0",
        "ngx-breadcrumbs": "0.0.3",
        "ngx-cookie-service": "^1.0.10",
        "ngx-drag-drop": "^2.0.0",
        "ngx-monaco-editor": "^6.0.0",
        "rxjs": "~6.3.3",
        "rxjs-compat": "^6.2.2",
        "tslib": "^1.9.0",
        "zone.js": "~0.8.26"
      },
      "devDependencies": {
        "@angular-devkit/build-angular": "~0.13.0",
        "@angular/cli": "~7.3.8",
        "@angular/compiler-cli": "~7.2.0",
        "@angular/language-service": "~7.2.0",
        "@types/jasmine": "~2.8.8",
        "@types/jasminewd2": "~2.0.3",
        "@types/lodash": "^4.14.110",
        "@types/node": "~8.9.4",
        "codelyzer": "~4.5.0",
        "jasmine-core": "~2.99.1",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~4.0.0",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "~2.0.1",
        "karma-jasmine": "~1.1.2",
        "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "~5.4.0",
        "sonarqube-scanner": "^2.4.0",
        "ts-node": "~7.0.0",
        "tslint": "~5.11.0",
        "typescript": "~3.2.2"
      }
    }

The code is normal: app.component includes ag-grid:

HTML file:    

<ag-grid-angular 
    style="width: 500px; height: 500px;" 
    class="ag-theme-balham"
    [rowData]="rowData" 
    [columnDefs]="columnDefs"
    [frameworkComponents]="frameworkComponents" 
    [singleClickEdit]="true"
    >
</ag-grid-angular>

TS File:    

    export class AppComponent {
      holdValue:any=["Hello"];
      ngOnInit(): void {
        //throw new Error("Method not implemented.");
      }
      private frameworkComponents;

      columnDefs = [
          {headerName: 'Make', field: 'make', editable: true, cellEditor:'multi',width:300, cellEditorParams: this.holdValue },
          {headerName: 'Model', field: 'model', editable: true,cellEditor:'text',width:300, cellEditorParams: this.holdValue },
          {headerName: 'Price', field: 'price', editable: true}
      ];

      rowData = [
          { make: '', model: 'Celica', price: 35000 },
          { make: '', model: 'Mondeo', price: 32000 },
          { make: '', model: 'Boxter', price: 72000 }
      ];

      constructor() {

        this.frameworkComponents ={
          multi: MulticomponentComponent
        }
        }
    }

Custom Cell Editor "MulticomponentComponent" used has following code:

HTML file:     

<ejs-multiselect id='multiselectelement' [dataSource]='sportsData' [fields]='fields' [(value)]="value"
[placeholder]='placeholder' (change)="OnChange($event)"></ejs-multiselect>


TS File:           

export class MulticomponentComponent implements ICellEditorAngularComp, AfterViewInit  {
  value:any=[];
  public sportsData: Object[] =  [
    { id: 'Game1', sports: 'Badminton' },
    { id: 'Game2', sports: 'Basketball' },
    { id: 'Game3', sports: 'Cricket' },
    { id: 'Game4', sports: 'Football' },
    { id: 'Game5', sports: 'Golf' }
];
// maps the appropriate column to fields property
public fields: Object = { text: 'sports', value: 'id' };
  public placeholder: string = 'Select games';
  ngAfterViewInit(): void {
  }
  getValue() {
    return this.value;
  }

  agInit(params: import("ag-grid-community").ICellEditorParams): void {

  }
  OnChange(e){
    console.log("change occur");
    console.log(this.value);
  }
}