Instantiating AgGrid as an element of a dynamic component

Question

I would like Ag-grid to be part of a dynamic component in Angular. The host calls componentFactoryResolver on the component which holds the agGrid instance but i seem to get the wrong kind of format. Would hope somebody could point in me in the direction of how to load agGrid as part of a larger dynamic component. Thanks in advance. Currently I am getting the format like this

In the component html file

<div style = "height:1000px; width:800px">
<ag-grid-angular    
    class="ag-theme-alpine"
    style="width: 500px; height: 500px;"     
    [gridOptions]="gridOptions"
    (gridReady)="onGridReady($event)">
</ag-grid-angular>
</div>

In the component.ts its like

columnDefs: ColDef[] = [
    { field: 'make' },
    { field: 'model' },
    { field: 'price'} ];
  
  rowData = [
      { make: 'Toyota', model: 'Celica', price: 35000 },
      { make: 'Ford', model: 'Mondeo', price: 32000 },
      { make: 'Porsche', model: 'Boxster', price: 72000 }
  ];  
  
  
  gridOptions : GridOptions = {
    // PROPERTIES
    // Objects like myRowData and myColDefs would be created in your application
    rowData: this.rowData,
    columnDefs: this.columnDefs,
    pagination: true,
    rowSelection: 'single',

    // EVENTS
    // Add event handlers
    onRowClicked: ( event : any) => console.log('A row was clicked'),
    onColumnResized: ( event : any ) => console.log('A column was resized'),
    onGridReady: ( event : any ) => console.log('The grid is now ready'),

    // CALLBACKS
    getRowHeight: (params: any) => 25
}
  

And the call back its like this

 onGridReady(params: any )  {
    this.api = params.api;
    this.columnApi = params.columnApi;
    if (this.gridOptions.api) {
      this.gridOptions.api.redrawRows();
    }      

And lastly the scss is like this

@import "ag-grid-community/dist/styles/ag-grid.css";
@import "ag-grid-community/dist/styles/ag-theme-alpine.css";

Answer 1

This is a similar issue as over here

(1) Fixed by adding the following to styles.scss in the root angular project

/* You can add global styles to this file, and also import other style files */

@import '~ag-grid-community/dist/styles/ag-grid.scss';
@import "~ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/dist/styles/ag-theme-balham.css";
@import '~ag-grid-community/dist/styles/ag-theme-alpine.css';
@import '~ag-grid-community/dist/styles/ag-theme-alpine-dark.css';
@import '~ag-grid-community/dist/styles/ag-theme-balham.css';
@import '~ag-grid-community/dist/styles/ag-theme-balham-dark.css';
@import '~ag-grid-community/dist/styles/ag-theme-material.css';

(2) Also be sure to give a pixel height to ag instance i.e.

<ag-grid-angular 
    class="ag-theme-balham" 
    style="height: 500px; width: 100%;" 
    [rowData]="rowData" 
    [columnDefs]="columnDefs">
</ag-grid-angular>

Result:

(3) Attend this YouTube course https://www.youtube.com/results?search_query=ag+grid+tutorial