How to get the value on the child using the emitter and pass it to the parent grid table in...

grid-table.component.ts

export class GridTableComponent implements OnInit {
@Input() gridOptions!: GridOptions;
@Input() rowActions!: any;
@Input() activeRowTriggered!: any;
@Input() form?: { config: any; title: string | Function; onSubmit: (data: object) => void };

@Output() gridReady = new EventEmitter<{ api: GridApi; columnApi: Column }>();

gridApi!: GridApi;
isBrowser: boolean = false;

formGroup: FormGroup = new FormGroup({});
totalRecords = 0;
currentPage = 1;
pageSize = 30;

activeRowData: any = null;
isDrawerVisible = false;

agGridOptions!: GridOptions;

components = {
cellRowActionsRenderer: RowActionsRendererComponent,
};
ngOnInit() {
if (this.rowActions?.actions?.length) {
this.createFormGroup();
}

if (this.isBrowser) {
let gridColDefs: ColDef[] = this.gridOptions.columnDefs || [];

if (this.rowActions?.actions?.length) {
const { columnTitle, width } = this.rowActions;
gridColDefs.push({
headerName: columnTitle || 'Actions',
pinned: 'right',
field: '',
filter: false,
suppressSizeToFit: true,
width: width || 80,
cellRenderer: 'cellRowActionsRenderer',
headerClass: 'header-text-center',
menuTabs: [],
floatingFilter: false,
cellRendererParams: {
context: {
gridState: {
rowActions: this.rowActions?.actions || [],
formCreateOpen: false,
activeRowData: null,
},
updateGrid: this.handleGridUpdate.bind(this)
}
},
});
}


this.totalRecords = this.gridOptions?.rowData?.length || 0;

this.agGridOptions = {
...this.gridOptions,
columnDefs: gridColDefs,
} as GridOptions;
}
}
handleGridUpdate(data: Partial<GridStateProps>) {
console.log('Grid updated with:', data);
}

}


row-action.component.ts

import { Component, EventEmitter, Input, OnChanges, ChangeDetectorRef, Output, Signal } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
import { SharedModule } from '../../../../shared/shared.module';

export interface GridStateProps {
rowActions?: (string | RowActionProps)[];
formCreateOpen?: boolean;
activeRowData?: any;
}

export interface RowActionProps {
name?: string;
onClick?: (data: any, grid: GridStateProps, updateGrid: (data: Partial<GridStateProps>) => void) => void;
icon?: string;
iconType?: 'ant-design' | 'font-awesome';
renderer?: any;
iconOnly?: boolean;
}

@Component({
selector: 'app-row-action',
standalone: true,
imports: [SharedModule],
template: `
<div class="grid-actions">
@for (action of actions; track action.name) {
@if (action.renderer) {
<span [innerHTML]="action.renderer"></span>
} @else {
<button class="qb-grid-action-button" (click)="handleAction(action)">
<span [class]="{
'qb-action-icon': action.iconOnly,
'qb-action-name': action.name && !action.iconOnly
}">
@if (action.icon && action.iconType === 'ant-design') {
<nz-icon [nzType]="action.icon" nzTheme="outline"></nz-icon>
} @else if (action.icon && action.iconType === 'font-awesome') {
<fa-icon [icon]="action.icon"></fa-icon>
} @else {
{{action.name}}
}
</span>
</button>
}
}
</div>
`,
styles: [
`
.grid-actions {
height: 100%;
display: flex;
align-items: center;
}
.qb-grid-action-button {
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
cursor: pointer;
}
`
]
})
export class RowActionsRendererComponent implements ICellRendererAngularComp, OnChanges {
@Input() data: any;
@Input() gridState!: GridStateProps;
@Input() activeRowTriggered!: Signal<any>;
@Output() updateGrid: EventEmitter<Partial<GridStateProps>> = new EventEmitter();

constructor(private cdr: ChangeDetectorRef) { }

agInit(params: any): void {
this.data = params.data;
this.gridState = params.context?.gridState || {};
}

refresh(params: any): boolean {
this.data = params.data;
this.gridState = params.context?.gridState || {};
return true;
}

ngOnChanges() { }

get actions(): RowActionProps[] {
return Array.isArray(this.gridState?.rowActions)
? this.gridState.rowActions.map((ROW) => {
if (typeof ROW === 'string') {
return {
name: ROW === 'edit' ? 'Edit' : 'Delete',
iconOnly: true,
icon: ROW === 'edit' ? 'pi pi-pencil' : 'pi pi-trash',
onClick: ROW === 'edit'
? (data) => {
this.updateGrid.emit({ formCreateOpen: true, activeRowData: data });
this.cdr.detectChanges();
}
: undefined,
};
}
return { ...ROW };
})
: [];
}

handleAction(action: RowActionProps) {
console.log('Action triggered:', action);
if (action.onClick) {
console.log('Executing action.onClick');
action.onClick(this.data, this.gridState, (updatedGrid) => {
console.log('Emitting updateGrid with:', updatedGrid);
this.updateGrid.emit(updatedGrid);
this.cdr.detectChanges();
});
}
}
}


user.component.ts

gridOptions: GridOptions = {
columnDefs: [
{ field: 'id', headerName: 'ID', sortable: true, filter: true },
{ field: 'name', headerName: 'Name', sortable: true, filter: true },
{ field: 'email', headerName: 'Email', sortable: true, filter: true }
],
rowData: gridOpts?.users || [],
pagination: true,
paginationPageSize: 10,
context: {
// form: this.formOptions
}
};

activeRow = signal<any>(null);

rowActions = {
columnTitle: 'Actions',
width: 100,
actions: [
{
name: 'Edit',
icon: faPenToSquare,
iconType: 'font-awesome',
onClick: (params: any, state: any, updateGrid: any) => {
this.activeRow.set(params);
}
},
{
name: 'Delete',
icon: faTrash,
iconType: 'font-awesome',
onClick: (params: any) => {
console.log('Delete clicked for:', params);
}
}
]
}


I used event emitter which is the updateGrid to get if formCreate is open and get the value activeRowData. I added the updateGrid under the cellRendererParams context but it didn't trigger the function also under the cellRendererParams still not calling the function.

I also used ICellRendererAngularComp ag grid

I'm trying to get the value of updateGrid to open the drawer function

this.activeRowData = data;
this.createFormGroup();
this.isDrawerVisible = true;
}

Continue reading...