auth

client/src/app/app.component.ts

@@ -1,17 +1,25 @@
 import { HttpClient } from '@angular/common/http';
-import { Component, inject } from '@angular/core';
+import { Component, inject, LOCALE_ID } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { AgGridAngular } from 'ag-grid-angular'; // Angular Data Grid Component
+import { ColDef } from 'ag-grid-community'; // Column Definition Type Interface
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, AgGridAngular],
+  providers: [[{ provide: LOCALE_ID, useValue: 'de-DE' }]],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })
 export class AppComponent {
   title = 'client';
 
+        defaultColDef: ColDef = {
+          flex: 1,
+          editable: true
+      };
+
   private http: HttpClient = inject(HttpClient);
 
   constructor() {
@@ -24,4 +32,31 @@ export class AppComponent {
       }
     })
   }
+
+  rowData = [
+    { make: "Tesla", model: "Model Y", price: 64950, electric: true },
+    { make: "Ford", model: "F-Series", price: 33850, electric: false },
+    { make: "Toyota", model: "Corolla", price: 29600, electric: false },
+  ];
+ 
+  // Column Definitions: Defines the columns to be displayed.
+  colDefs: ColDef[] = [
+    { field: "make" },
+    { 
+      field: "model", 
+      cellEditor: 'agSelectCellEditor',
+      singleClickEdit: true,
+      cellEditorParams: {
+        values: ['English', 'Spanish', 'French', 'Portuguese', '(other)'],
+    }
+    },
+    { field: "price", type: 'number'
+      // cellEditor: 'agDateCellEditor',
+      // cellEditorParams: {
+      //     min: '2000-01-01',
+      //     max: '2019-12-31',
+      // }
+    },
+    { field: "electric", editable: true }
+  ];
 }