I encountered an exception while working on my Angular 2 project and I'm struggling to figure out the cause.
Below is the snippet of my code:
ts:
import {Component} from "@angular/core";
import {GridOptions} from "ag-grid";
import {RedComponentComponent} from "../red-component/red-component.component";
@Component({
selector: 'app-my-grid-application',
templateUrl: './my-grid-application.component.html'
})
export class MyGridApplicationComponent {
public gridOptions: GridOptions;
constructor() {
this.gridOptions = {};
this.gridOptions.columnDefs = [
{
headerName: "ID",
field: "id",
width: 100
},
{
headerName: "Value",
field: "value",
cellRendererFramework: RedComponentComponent,
width: 100
},
];
this.gridOptions.rowData = [
{id: 5, value: 10},
{id: 10, value: 15},
{id: 15, value: 20}
]
}
}
html:
<div style="width: 200px;">
<app-my-grid-application #agGrid style="width: 100%; height: 200px;" class="ag-fresh"
[gridOptions]="gridOptions">
</app-my-grid-application>
</div>
The error message displayed:
Can't bind to 'gridOptions' since it isn't a known property of 'app-my-grid-application'.
I would greatly appreciate any assistance you could offer!