Creating a dynamic ag grid table but encounter some error also not displaying in angular 19

grid-table.component.ts

export class GridTableComponent implements OnInit, AfterViewInit {
@Input() gridOptions!: GridOptions;
@Input() rowActions!: any;
@Output() gridReady = new EventEmitter<{ api: GridApi, columnApi: Column }>();

agGridOptions!: GridOptions;
isBrowser: boolean = false;

actions = signal<RowActionProps[]>([]);

components = {
cellRowActionsRenderer: RowActionsRendererComponent,
};

constructor(@Inject(PLATFORM_ID) private platformId: Object) {
this.isBrowser = isPlatformBrowser(this.platformId);
}

ngOnInit() {
if (this.rowActions && this.rowActions.actions?.length) {
this.actions.set(this.rowActions.actions);
}
}

async ngAfterViewInit() {
if (this.isBrowser) {
const { AgGridAngular } = await import('ag-grid-angular');

let gridColDefs: ColDef[] = this.gridOptions.columnDefs || [];

if (this.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
});
}

this.agGridOptions = {
...this.gridOptions,
columnDefs: gridColDefs,
context: {
gridState: this.rowActions,
}
} as GridOptions;
console.log('Final agGridOptions:', this.agGridOptions);

}
}

onGridReady(params: any) {
this.gridReady.emit({ api: params.api, columnApi: params.api });
}
}


grid-table.component.html

<div style="height: calc(100vh - 250px) !important">
<ag-grid-angular
class="ag-theme-alpine h-100"
[gridOptions]="agGridOptions"
(gridReady)="onGridReady($event)"
[rowData]="gridOptions.rowData"
[columnDefs]="gridOptions.columnDefs"
[paginationPageSize]="gridOptions.paginationPageSize || 30"
[pagination]="gridOptions.pagination"
[components]="components"
[suppressPaginationPanel]="true">
</ag-grid-angular>
</div>


row-actions-renderer.component.ts

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;
renderer?: any;
iconOnly?: boolean;
}

@Component({
selector: 'app-row-action',
standalone: true,
templateUrl: './row-action.component.html',
styleUrls: ['./row-action.component.scss']
})
export class RowActionsRendererComponent implements ICellRendererAngularComp, OnChanges {
@Input() data: any;
@Input() gridState!: GridStateProps;
@Output() updateGrid = new EventEmitter<Partial<GridStateProps>>();

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

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

ngOnChanges() {}

get actions(): RowActionProps[] {
return (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 })
: undefined,
};
}
return { ...ROW };
});
}

handleAction(action: RowActionProps) {
if (action.onClick) {
action.onClick(this.data, this.gridState, (updatedGrid) => {
this.updateGrid.emit(updatedGrid);
});
}
}
}


row-actions-renderer.component.html

<div class="grid-actions">
@for (action of actions; track action.name) {
<button class="qb-grid-action-button" (click)="handleAction(action)">
{{ action.name }}
</button>
}
</div>


I was trying to create a dynamic grid table but i encounter some error like AG Grid: invalid gridOptions property 'gridOptions' did you mean any of these: onGridOptionsChanged, groupHideOpenParents, dragAndDropImageComponentParams, serverSidePivotResultFieldSeparator, serverSideInitialRowCount, getServerSideGroupLevelParams, suppressFieldDotNotation, suppressRowGroupHidesColumns. If you are trying to annotate gridOptions with application data, use the 'gridOptions.context' property instead.

Also the button doesn't display. but when trying to console in agInit the log was trigger. please help fix the issue also the displaying button.

Continue reading...