In the midst of developing my angular 4 project, which is based on a starter template found here, I encountered an issue while trying to integrate ag-grid into my project.
Following the instructions provided here, I successfully created a new example project featuring ag-grid. The result was promising:
https://i.sstatic.net/8Bx7O.png
However, when attempting to embed the ag-grid into my actual project, it ended up looking like this:
https://i.sstatic.net/jhwfF.png
Upon comparing the code between the two projects, the only noticeable difference was that I had removed the "Red Component" element from my real project. Curiously, removing it from the example project did not have any adverse effects on the UI.
<div style="width: 200px;">
<ag-grid-angular #agGrid style="width: 100%; height: 200px;" class="ag-fresh"
[gridOptions]="gridOptions">
</ag-grid-angular>
</div>
constructor(
) {
this.gridOptions = {};
this.gridOptions.columnDefs = [
{
headerName: "ID",
field: "id",
width: 100
},
{
headerName: "Value",
field: "value",
width: 100
},
];
this.gridOptions.rowData = [
{id: 5, value: 10},
{id: 10, value: 15},
{id: 15, value: 20}
]
}
Even after attempting to remove bootstrap from the equation, the issue persisted. This has left me at a loss as to how to better understand or resolve the problem. Any assistance or guidance in this matter would be greatly appreciated. Please let me know if you require any additional information.