Dev Stack Source

Answer : In ag-grid the columns in gridOptions are used once at grid initialisation. If you change the columns after initialisation, you must tell the grid. This is done by calling gridOptions.api.setColumnDefs() Details of this api method are provided in the ag-grid documentation here. I think this has been fixed already. I am able to do something like this now with latest angular and ag-grid. Please note I am using ngxs here, however this still indicates the ability to get the column definitions async as I am getting the column defs based on the property names of the data that is being returned from the back-end in this case rowData. Firstly, I am fetching the row data from the back-end API. Then when it is fetched I perform operations in the Select for column that map the headers from returned data to properties. The data will not be displayed without headers, as soon as the headers are there it will redraw the grid with all the column definitions and data. <ag-grid...

Answer : Try using ::ng-deep combinator https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep ::ng-deep .ag-theme-balham .ag-header { background-color: #e0e0e0; } If that does not work, put your css in the global stylesheet and check if the styles are overriden correctly Override the header-cell class instead .ag-theme-balham .ag-header-cell{ background-color: #e0e0e0; } and if you have header-group then .ag-theme-balham .ag-header-cell, .ag-theme-balham .ag-header-group-cell{ background-color: #e0e0e0; }

Answer : This is almost certainly due to you having DOCTYPE html in your html file. If you do, then you need to ensure that the grids container has a non-0 height to fill, otherwise it will appear as a flat line as you've found. This is not an ag-Grid specific issue - it's a side effect of not having quirks mode in use. The easiest thing for you to do is this: <style> html, body { width: 100%; height: 100%; } This StackOverflow Question/Answer explains the underlying issue pretty well You shall try setting the autoHeight of the ag-grid, by setting the DomLayout . See the sample code below for angular. onGridReady(params) { this.gridApi = params.api; this.gridColumnApi = params.columnApi; //The ag-grid is not enlarging based on the page height, //so dynamically adjusting the height of the grid this.gridApi.setDomLayout("autoHeight"); } For reference see this https://plnkr.co/edit/Jb1TD7gbA4w7yclU?prev...