Ag grid on button click open a pop up and pass data from row in pop up in angular

Question

I am using ag-grid in angular and in each row on the last column, I have an icon after clicking on which a pop up should open and Edit, Delete and Add functions are displayed which should have id and some other data passed from row data. I am using a different component for edit, delete and add functions. When I am clicking on the Invoke Parent button the subcomponent is not opening and I am trying to figure out what am I missing? I am using How to add pop up on ag-grid data in angular 6? as a refernce

manage.component.html

<ag-grid-angular
  style="padding-top: 10px;" 
  class="ag-theme-alpine"
  [rowData]="rowData" 
  [columnDefs]="columnDefs" 
  (gridReady)="onGridReady($event)"
   [pagination]="true" 
  [paginationPageSize]="5"
  [defaultColDef]="defaultColDef"  
  [frameworkComponents]="frameworkComponents"
  domLayout="autoHeight" 
>
</ag-grid-angular>

manage.component.ts

export class ManageComponent implements OnInit {
      public frameworkComponents : any;

      constructor(private myService: MyService) {
        this.frameworkComponents = {
          actionItemCellRenderer: ActionItemComponent,
        };
    
      }
 public columnDefs: ColDef[] = [
           .
           .
           .
          {
          headerName: 'Actions',
          field: 'id',
          cellRenderer: 'actionItemCellRenderer',
          cellStyle: {
            borderRightColor: '#e1e1e1',
            borderRightWidth: '1px',
            borderRightStyle: 'solid',
          },
        },];

       public methodFromParent() {
          console.log('methodFromParent is called');
          this.openMyDialogPopUp();
        }
        public openMyDialogPopUp() {
            const eDiv = document.createElement('div');
            var plusiconhtml = '<i class="icon--plus-add" style="color:#0672CB; margin-right: 10px;padding-right:10px" aria-hidden="true"></i>';
            var editiconhtml = '<i class="icon--pencil" style="color:#0672CB; margin-right: 10px;padding-right:10px" aria-hidden="true"></i>'
            var trashiconhtml = '<i class="icon--trash" style="color:red; margin-right: 10px;padding-right:10px" aria-hidden="true"></i>'
            eDiv.innerHTML = plusiconhtml + editiconhtml + trashiconhtml;
            
            const createIcon = eDiv.querySelectorAll('.icon--plus-add')[0];
            createIcon.addEventListener('click', () => {
              window.location.href = '/create-sample?id=' + 5;
            });
            return eDiv;
        }

popup.component.html

<span>
    <button style="height: 20px" (click)="invokeParentMethod()" class="btn btn-info">
        Invoke Parent
    </button>
</span>

popup.component.ts

import { Component, Inject, OnInit } from '@angular/core';
import {ICellRendererAngularComp} from "ag-grid-angular";
@Component({
  selector: 'app-popup',
  templateUrl: './popup.component.html',
  styleUrls: ['./popup.component.css']
})
export class PopupComponent implements ICellRendererAngularComp  {
  public params: any;
    
  agInit(params: any): void {
    this.params = params;
  }
    
  public invokeParentMethod() {
    debugger;
    this.params.context.componentParent.methodFromParent(`Row: ${this.params.node.rowIndex}, Col: ${this.params.colDef.headerName}`)
  }
    
  refresh(): boolean {
    return false;
  }

}