ag-grid not visible in Angular application

Question

I am doing an R&D on different third-party grids which have a Master-Detail feature available.

I've followed steps from the Ag-Grid website to render an ag-grid with an expandable master-detail grid.

But when the app is rendered, I see only a blank component.

there are no errors in the console as well.

This is my html

<div><p>ag-hierarchy-grid works!</p></div>
<div>
    <ag-grid-angular
    style="width: 100%; height: 100%;"
    class="ag-theme-alpine"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [masterDetail]="true"
    [detailCellRendererParams]="detailCellRendererParams"
    [rowData]="rowData"
    (firstDataRendered)="onFirstDataRendered($event)"
    (gridReady)="onGridReady($event)"
  ></ag-grid-angular>
</div>

And this is my component code

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import {
  ColDef,
  FirstDataRenderedEvent,
  GridReadyEvent,
  IDetailCellRendererParams,
} from 'ag-grid-community';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import 'ag-grid-enterprise';
import { IDocument, ITransaction } from './interfaces';


@Component({
  selector: 'app-ag-hierarchy-grid',
  templateUrl: './ag-hierarchy-grid.component.html',
  styleUrls: ['./ag-hierarchy-grid.component.scss']
})
export class AgHierarchyGridComponent implements OnInit {
  public columnDefs: ColDef[] = [
    // group cell renderer needed for expand / collapse icons
    { field: 'TransactionID' , cellRenderer: 'agGroupCellRenderer', hide: true },
    { field: 'Engagement',headerName: 'Engagement' },
    { field: 'DateAndTime',headerName: 'Date & Time of Request'  },
    { field: 'Service' ,headerName: 'Service' },
    { field: 'GroupSSL',headerName: 'Group/SSL' },
    { field: 'Types',headerName: 'Types(Forms)' },
    { field: 'ExtractionStatus',headerName: 'Overall Extraction Status' },
    { field: 'QCStatus',headerName: 'Quality Check Status' },
    { field: 'QCAnalyst',headerName: 'Quality Analyst' },
    { field: 'ParentDownloadAction',headerName: 'Action' }
  ];
  public defaultColDef: ColDef = {
    flex: 1,
  };
  public detailCellRendererParams: any = {
    detailGridOptions: {
      columnDefs: [
        { field: 'TransactionID' , hide: true },
        { field: 'DocName' ,headerName: 'Document Name' },
        { field: 'ExtractionStatus' ,headerName: 'Data Extraction Status' },
        { field: 'ChildDownloadAction',headerName: 'Action' }
        
      ],
      defaultColDef: {
        flex: 1,
      },
    },
    getDetailRowData: (params) => {
      params.successCallback(params.data.documents);
    },
  } as IDetailCellRendererParams<ITransaction, IDocument>;
  public rowData!: ITransaction[];
  constructor(private http: HttpClient) { }

  ngOnInit(): void {
  }
 

  onGridReady(params: GridReadyEvent<ITransaction>) {
    this.http
      .get<ITransaction[]>(
        'http://localhost:4200//src//assets//data.json'
      )
      .subscribe((data) => {
        this.rowData = data;
      });
  }
}

Can someone point me to what I might be missing?

Answer 1

I had a similar issue and the cause of it was that the height of the table was 0. So try this css and see if the problem is solved. If it solves it set it to a height you want.

.ag-theme-alpine {
  min-height: 500px;
  height: 500px;
}

hint: You can inspect element and check if the table is actually rendered in the screen but is not visible due to 0 height.