Ag Grid anpassungen

client/src/app/modules/system/system.component.html

@@ -1,9 +1,11 @@
+@if (myTheme) {
 <ag-grid-angular
     style="width: 100%; height: 100%;"
     (gridReady)="onGridReady($event)"
     [gridOptions]="gridOptions!"
+    [theme]="myTheme"
 />
-
+}
 <div class="floating-btn-container">
     <button mat-flat-button class="btn-create mat-elevation-z8" (click)="openCreateSystem()"  >Schließanlage anlegen</button>
   </div>

client/src/app/modules/system/system.component.ts

@@ -1,13 +1,15 @@
 import { DatePipe } from '@angular/common';
 import { Component, inject } from '@angular/core';
 import { AgGridAngular } from 'ag-grid-angular';
-import { GridApi, GridOptions, GridReadyEvent } from 'ag-grid-community';
+import { GridApi, GridOptions, GridReadyEvent, Theme, ThemeDefaultParams } from 'ag-grid-community';
 import { ApiService } from '../../shared/api.service';
 import { HELPER } from '../../shared/helper.service';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { CreateSystemComponent } from './create/create.component';
 import { AgSystemManagerComponent } from '../../shared/ag-grid/components/ag-system-manager/ag-system-manager.component';
+import { AgGridService } from '../../shared/ag-grid/ag-grid.service';
+import { AgGridContainerComponent } from '../../shared/ag-grid/components/ag-grid-container/ag-grid-container.component';
 
 @Component({
     selector: 'app-system',
@@ -16,31 +18,31 @@ import { AgSystemManagerComponent } from '../../shared/ag-grid/components/ag-sys
     templateUrl: './system.component.html',
     styleUrl: './system.component.scss'
 })
-export class SystemComponent {
+export class SystemComponent extends AgGridContainerComponent {
   private api: ApiService = inject(ApiService);
   private datePipe = inject(DatePipe);
-    private dialog: MatDialog = inject(MatDialog);
+  private dialog: MatDialog = inject(MatDialog);
 
   gridApi!: GridApi;
-
   gridOptions: GridOptions = HELPER.getGridOptions();
+  
 
   constructor() {
+    super();
     this.gridOptions.columnDefs = [
       { colId: 'name', field: 'name', headerName: 'Name', sort: 'asc', flex: 1},
       { field: 'createdAt', headerName: 'Angelegt', cellRenderer: (data: any) => data.value ? this.datePipe.transform(new Date(data.value)) : '-' },
       { field: 'updatedAt', headerName: 'Upgedated', cellRenderer: (data: any) => data.value ? this.datePipe.transform(new Date(data.value)) : '-' },
       {
-              colId: 'actions'
-              , headerName: 'Aktionen'
-              , width: 120
-              , cellRenderer: AgSystemManagerComponent
-              // , onCellClicked: (event) => { this.deleteKey(event.data.id)}
-            }
-    ]
+        colId: 'actions'
+        , headerName: 'Aktionen'
+        , width: 120
+        , cellRenderer: AgSystemManagerComponent
+        // , onCellClicked: (event) => { this.deleteKey(event.data.id)}
+      }
+    ];
   }
 
-
   loadSystems() {
     this.api.getSystems().subscribe({
       next: n => {