title: Can't bind to 'gridOptions' since it isn't a known property of 'ag-grid-angular'
body: <p>I am trying to use age by following the example at <a href="https://www.ag-grid.com/example-angular-third-party/?framework=all#material-design1" rel="nofollow noreferrer">https://www.ag-grid.com/example-angular-third-party/?framework=all#material-design1</a></p>
  <p>My environment is</p>
  <pre><code>   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
    / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
   / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
  /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                 |___/
  @angular/cli: 1.0.1
  node: 7.3.0
  os: win32 x64
  @angular/animations: 4.1.0
  @angular/common: 4.1.0
  @angular/compiler: 4.1.0
  @angular/core: 4.1.0
  @angular/flex-layout: 2.0.0-rc.1
  @angular/forms: 4.1.0
  @angular/http: 4.1.0
  @angular/material: 2.0.0-beta.3
  @angular/platform-browser: 4.1.0
  @angular/platform-browser-dynamic: 4.1.0
  @angular/router: 4.1.0
  @angular/cli: 1.0.1
  @angular/compiler-cli: 4.1.0
  @angular/language-service: 4.1.0
  </code></pre>
  <p>My code is as follows:</p>
  <pre><code>import { Component, OnInit } from '@angular/core'
  import { AutoUnsubscribe } from 'ngx-auto-unsubscribe'
  import { GridOptions } from 'ag-grid'
  import { AgGridCellMdInputComponent } from '../../../shared/components/ag-grid-cell-md-input/ag-grid-cell-md-input.component'
  import { AgGridCellMdCheckboxComponent } from '../../../shared/components/ag-grid-md-checkbox/ag-grid-cell-md-checkbox.component'
  import { AgGridCellMdSelectComponent } from '../../../shared/components/ag-grid-cell-md-select/ag-grid-cell-md-select.component'
  
  @AutoUnsubscribe()
  @Component(
      {
        selector: 'epimss-immunization',
        template: `
          &lt;p&gt;
            immunization Works!
          &lt;/p&gt;
          &lt;div style = &quot;width: 800px;&quot;&gt;
            &lt;h2&gt;Cell Editor with Material Design Components - Set 1&lt;/h2&gt;
  
            &lt;ag-grid-angular
                style = &quot;width: 100%; height: 250px;&quot;
                class = &quot;ag-material&quot;
                [gridOptions] = &quot;gridOptions&quot;
  
            &gt;&lt;/ag-grid-angular&gt;
          &lt;/div&gt;
        `,
        styles: []
      } )
  export class ImmunizationComponent implements OnInit {
    gridOptions: GridOptions
    
    constructor() {
      this.gridOptions = &lt;GridOptions&gt;{
        rowData: this.createRowData(),
        columnDefs: this.createColumnDefs(),
        onGridReady: () =&gt; this.gridOptions.api.sizeColumnsToFit(),
        rowHeight: 48 // recommended row height for material design data grids,
      }
    }
    
    private createColumnDefs() {
      return [
        {
          headerName: 'Disease',
          field: 'disease',
          cellEditorFramework: AgGridCellMdSelectComponent,
          cellEditorParams: {
            vegetables: [ 'BCG', 'Dipththeria', 'Measles', 'Mumps', 'Rubella', 'Typhoid', 'Whooping Cough' ]
          },
          editable: true
        },
        
        {
          headerName: 'Immunized ?',
          field: 'immunized',
          cellRendererFramework: AgGridCellMdCheckboxComponent
        },
        
        {
          headerName: 'Immunization Date',
          field: 'immunizationDate',
          cellEditorFramework: AgGridCellMdInputComponent,
          editable: true
        },
        
        {
          headerName: 'Booster ?',
          field: 'booster',
          cellRendererFramework: AgGridCellMdInputComponent
        },
        
        {
          headerName: 'Booster',
          field: 'booster',
          cellRendererFramework: AgGridCellMdCheckboxComponent
        }
      ]
    }
    
    private createRowData() {
      return []
    }
    
    ngOnInit() {
    }
  }
  </code></pre>
  <p>However, trying to run the application results in the following:</p>
  <pre><code>zone.js:567 Unhandled Promise rejection: Template parse errors:
  Can't bind to 'gridOptions' since it isn't a known property of 'ag-grid-angular'.
  1. If 'ag-grid-angular' is an Angular component and it has 'gridOptions' input, then verify that it is part of this module.
  2. If 'ag-grid-angular' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (&quot;            style = &quot;width: 100%; height: 250px;&quot;
                class = &quot;ag-material&quot;
                [ERROR -&gt;][gridOptions] = &quot;gridOptions&quot;
  
            &gt;&lt;/ag-grid-angular&gt;
  </code></pre>
  <p>Googling and other searches have no been helpful in resolving the issue for me.</p>
  <p>Appreciate any help.</p>
  <p>Cheers</p>
  <h2>EDIT1</h2>
  <p>AppModule</p>
  <pre><code>@NgModule(
      {
        declarations: [
          AppComponent, MenubarComponent, ToolbarComponent  //HomeComponent
        ],
        imports: [
          ...epimss_modules,
         AgGridModule.withComponents( [AgGridCellMdCheckboxComponent,
   AgGridCellMdInputComponent, AgGridCellMdRadioComponent,
   AgGridCellMdSelectComponent, ImmunizationComponent] ),
          DynamicModule.withComponents( [ ...epimss_entry_components ] ),
          
          BrowserModule,
          FlexLayoutModule,
          StoreModule.provideStore( reducer ),
          EffectsModule.run( RaceEffects ),
          RouterStoreModule.connectRouter(),
          StoreDevtoolsModule.instrumentOnlyWithExtension()
          
          //        DBModule.provideDB(schema),
        
        ],
        entryComponents: [],
        providers: [ AppStateService, StoreService, Title ],
        bootstrap: [ AppComponent ]
      } )
  export class AppModule {
  }
  </code></pre>