Search code examples
angularag-gridag-grid-angularag-grid-ng2

how do you use multiple components in an ag-grid module?

I'm trying to use ag-grid and the module for putting together data sets on separate components.

As opposed to the tutorial where it shows to import the import AgGridModule only in the app module like so...

 import { AgGridModule } from 'ag-grid-angular';

And then put the data in the app component like so...

 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 },
    ];

and then after that to put the tag component in the HTML app page and put in the needed attributes.

I was wondering/hoping that this could be accomplished by something in the app module like the following:

  AgGridModule.withComponents([CarsComponent, 
  TrucksComponent
  ]),

and then in each of those components put the needed data, like for instance, in the CarsComponent

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 },
 ];

then in the TrucksComponent ...

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 }
   ];

and then put separate ag-gr-d tags in each HTML component file like so...

              <ag-grid-angular
              style="width: 500px; height: 220px;"
              class="ag-theme-alpine"
              [rowData]="rowData"
              [columnDefs]="columnDefs">
              </ag-grid-angular>

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.

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:

   ERROR in src/app/carsprods/carsprods.component.html:28:30 - error TS2339: Property 'rowData' does not exist on type 'CarsprodsComponent'.

28                   [rowData]="rowData"
                                ~~~~~~~
  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]="columnDefs">
                                   ~~~~~~~~~~
  src/app/carsprods/carsprods.component.ts:6:15
    6   templateUrl:'carsprods.component.html',
                    ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component CarsprodsComponent.
Solution

  • When you say

     AgGridModule.withComponents([CarsComponent, TrucksComponent])

    It means these components will be used BY ; either as cellRenderer, editor component, filter components, etc.

    If you want to use WITHIN your CarsComponent or TrucksComponent, then you don't need to declare them with AgGridModule.withComponents.