How to implement cellclick function

Hello,
Is it possible to get an example of the use of the @Output property
@Output() cellclick: EventEmitter<WebDataRocks.Cell> = new EventEmitter();
with Webdatarocks Angular?
I am attempting to execute a function on cell click, and so far neither cellclick nor adding ‘(click)=”open()”‘ in a customizeCell function html element is working, where open() is a function defined on the same component.  I also tried referring to it as ‘this.open’ or ‘this.open’ or “${this.open}” or “${this.open()}” with customizeCell defined using fat arrow syntax in order to close over the component’s ‘this’.  Only the last syntax recognized the this.open() as a variable but the table was rendered very strangely with large light green cells extending horizontally over the whole table.
This is the onCustomizeCell code and the onCellClick() and open() functions.  ( I am trying to use the ng-bootstrap modal to open another component in both cases, either the cellclick output or onCustomizeCell.) 

   onCustomizeCell = ( cell: WebDataRocks.CellBuilder, data: WebDataRocks.Cell) => {
        if (data.isClassicTotalRow) cell.addClass("fm-total-classic-r");
        if (data.isGrandTotalRow) cell.addClass("fm-grand-total-r");
        if (data.isGrandTotalColumn) cell.addClass("fm-grand-total-c");
        var augmentedRestriction=JSON.parse(JSON.stringify(this.origJsonQueryObj.restriction));
        if (!data.isTotal && data.rows[0] && data.columns[0]) {
            augmentedRestriction.push([data.rows[0].hierarchyCaption, data.rows[0].caption, "="]);
            augmentedRestriction.push([data.columns[0].hierarchyCaption, data.columns[0].caption, "="]);
            var encodedUri=encodeURIComponent(`{"restriction":${JSON.stringify(augmentedRestriction)}, "projection":${JSON.stringify(this.origJsonQueryObj.projection)}}`);
        }
        var openModal=this.open;
        var text;
        switch (data.value) {
            case 0: text="FAIL";
            case 1: text="PASS";
            case 2: text="SKIP";
        }
        if (data.isTotal || data.isTotalColumn || data.isTotalRow) {
            cell.text=text
        } else {
            switch (data.value) {
            case 0: {
//                cell.text=`<a href='#/search?stringQuery=${encodedUri}',  target='_blank',  style='text-decoration: underline; color: white'>FAIL</a>`
                    cell.text=`<button class="btn  btn-outline-primary" type="button" (click)="${this.open}">FAIL</button>`
            };
            break;
            case 1: {
                cell.text=`<a href='#/search?stringQuery=${encodedUri}',  target='_blank',  style='text-decoration: underline; color: white'>PASS</a>`
            };
            break;
            case 2: {
                cell.text=`<a href='#/search?stringQuery=${encodedUri}',  target='_blank',  style='text-decoration: underline; color: white'>SKIP</a>`
            };
            break;
            }
        }
      }
   
onCellClick = (cell: WebDataRocks.CellBuilder) => {
     console.log("onCellClick called");
     const modalRef = this.modalService.open(DrilldownComponent);
     modalRef.componentInstance.name = 'Drilldown';
}
open() {
    console.log("open called");
    const modalRef = this.modalService.open(DrilldownComponent);
    modalRef.componentInstance.name = 'Drilldown';
}

Additionally this is how I’m attempting to listen for the (cellclick) event on the component containing wrb-pivot, but onClickCell() never gets called:

 <wbr-pivot *ngIf="!empty" #pivot1 [toolbar]="false"
          [width]="'100%'"
          [height]="500"
          [customizeCell]="onCustomizeCell"
          (ready)="onPivotReady($event)"
          (reportcomplete)="onReportComplete()"
          (reportchange)="onReportChange()"
          (cellclick)="onCellClick($event)"
          >
    WebDataRocks will appear here
</wbr-pivot>

Thank you in advance,
Olga