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

Question

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.

Answer 1

Maybe the issue is what error message says invalid gridOptions property 'gridOptions'. Check this input @Input() gridOptions!: GridOptions; of GridTableComponent, what do you have in there. Probably there're coming wrong input like { gridOptions: {...} }