CODEWITHSUNDEEP
cssangularag-grid
xyz
xyz

Reputation: 17

How to use single ag grid in different components dynamically with changing style

I have one angular grid ag-grid which is in component1 which we are using some other component2, i want to use the same component1 in component3 but while using it in component3 i want to change the class of ag-grid as 'ag-grid-them-dark'. how to pass the configure class to component.

component1 code

<ag-grid-angular class="ag-theme-balham" [gridOptions]="gridOptions"
    [rowData]="gridSource" [columnDefs]="columnDefs" [rowClassRules]="rowClassRules"
    (gridReady)="onGridReady($event)">
  </ag-grid-angular>

 this.gridOptions = {
      rowData: this.gridSource
    };

component3 code on click of button icon pop up will open which will show aggrid but we want that in ag-grid-dark class

 private open1: MatDialogRef<component3>;
 dataValues() {
    this.dialogRef = this.open1.open(component3, {
      width: '100%',
      height: '100%',
      data: {
        context: this, dataTable: this.comingdata, Col: this.column
      }
    });
  }
}

Upvotes: 0

Views: 1272

Answers (1)

yazantahhan
yazantahhan

Reputation: 3110

You can create a wrapper component that will wrap you grid with your default parameters or passing them as inputs.

import { Component } from '@angular/core';

@Component({
  selector: 'wrapper-component',
  templateUrl: './wrapper.component.html',
  styleUrls: [ './wrapper.component.scss' ]
})
export class WrapperComponent  {
    @Input() columnDefs: Array<any>;
    @Input() rowData: Array<any>;
}

And you HTML template

<ag-grid-angular
    class="ag-theme-alpine"
    [rowData]="rowData"
    [columnDefs]="columnDefs">
</ag-grid-angular>

You can also make it generic and use it anywhere you want in your app by passing the inputs that will change from view to another which is the preferred way.

Upvotes: 0

Related Questions