title: how do you use multiple components in an ag-grid module?
body: <p>I'm trying to use ag-grid and the module for putting together data sets on separate components.</p>
  <p>As opposed to the tutorial where it shows to import the import AgGridModule only in the app module like so...</p>
  <pre><code> import { AgGridModule } from 'ag-grid-angular';
  </code></pre>
  <p>And then put the data in the app component like so...</p>
  <pre><code> columnDefs = [
          { field: 'make' , sortable: true},
          { field: 'model' , sortable: true},
          { field: 'price', sortable: true }
      ];
      rowData = [
      { make: 'Toyota', model: 'Celica', price: 35000 },
      { make: 'Ford', model: 'Mondeo', price: 32000 },
      { make: 'Porsche', model: 'Boxter', price: 72000 },
      ];
  </code></pre>
  <p>and then after that to put the  tag component in the HTML app page and put in the needed attributes.</p>
  <p>I was wondering/hoping that this could be accomplished by something in the app module like the following:</p>
  <pre><code>  AgGridModule.withComponents([CarsComponent, 
    TrucksComponent
    ]),
  </code></pre>
  <p>and then in each of those components put the needed data, like for instance, in the CarsComponent</p>
  <pre><code>export class CarsComponent implements OnInit { ..../
  columnDefs = [
      { field: 'make' , sortable: true},
      { field: 'model' , sortable: true},
      { field: 'price', sortable: true }
  ];
  rowData = [
      { make: 'Toyota', model: 'Celica', price: 35000 },
      { make: 'Ford', model: 'Mondeo', price: 32000 },
      { make: 'Porsche', model: 'Boxter', price: 72000 },
   ];
  </code></pre>
  <p>then in the TrucksComponent ...</p>
  <pre><code>export class TrucksComponent implements OnInit { ..../
     columnDefs = [
      { field: 'make' , sortable: true},
      { field: 'model' , sortable: true},
      { field: 'price', sortable: true }
      ];
  
    rowData = [
      { make: 'Chevy', model: 'Silverado', price: 38000 },
      { make: 'Ford', model: 'F350', price: 41000 },
      { make: 'Dodge', model: 'Ram', price: 36500 }
     ];
  </code></pre>
  <p>and then put separate ag-gr-d tags in each HTML component file like so...</p>
  <pre><code>              &lt;ag-grid-angular
                style=&quot;width: 500px; height: 220px;&quot;
                class=&quot;ag-theme-alpine&quot;
                [rowData]=&quot;rowData&quot;
                [columnDefs]=&quot;columnDefs&quot;&gt;
                &lt;/ag-grid-angular&gt;
  </code></pre>
  <p>Can this be done? am I on the right track, or just off base in assuming it works this way? I couldn't find real clear documentation or examples citing this on the ag-grid website.</p>
  <p>I add that info to one of the intended Cars components - the rowData in the component and the ag-grid template box in the HTML and get the following errors:</p>
  <pre><code>   ERROR in src/app/carsprods/carsprods.component.html:28:30 - error TS2339: Property 'rowData' does not exist on type 'CarsprodsComponent'.
  
  28                   [rowData]=&quot;rowData&quot;
                                  ~~~~~~~
    src/app/carsprods/carsprods.component.ts:6:15
      6   templateUrl:'carsprods.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~
      Error occurs in the template of component CarsprodsComponent.
  src/app/carsprods/carsprods.component.html:29:33 - error TS2339: Property 'columnDefs' does not exist on type 'CarsprodsComponent'.
   [columnDefs]=&quot;columnDefs&quot;&gt;
                                     ~~~~~~~~~~
    src/app/carsprods/carsprods.component.ts:6:15
      6   templateUrl:'carsprods.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~
      Error occurs in the template of component CarsprodsComponent.
  </code></pre>