can't bind to '' since it isn't a known property of '' angular 2

Question

I get an exception in my Angular 2 project, and don't understand why.

This is 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:

Can't bind to 'gridOptions' since it isn't a known property of 'app-my-grid-application'.

Any help will be profoundly appreciated!

Answer 1

In your component this is a property

public gridOptions: GridOptions;

But it should be

@Input() gridOptions: GridOptions;