build: hello world ag-grid included in scouting crypto page

angular.json

@@ -19,7 +19,12 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
             "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["./node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css"],
+            "styles": [
+              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
+              "./node_modules/ag-grid-community/styles/ag-grid.min.css",
+              "./node_modules/ag-grid-community/styles/ag-theme-quartz.min.css",
+              "src/styles.css"
+            ],
             "scripts": [
               "./node_modules/@popperjs/core/dist/umd/popper.min.js",
               "./node_modules/bootstrap/dist/js/bootstrap.min.js"

app.json

@@ -1,6 +1,6 @@
 {
-  "name": "Angular 14 Starter",
-  "description": "Angular 14 Starter project with Material, Transloco, Jest & Compodoc",
-  "repository": "https://github.com/wlucha/angular-starter",
+  "name": "SkriLL",
+  "description": "Get rich or die trying!",
+  "repository": "https://git.zavage.net/Zavage-Software/skrill-frontend",
   "keywords": ["angular", "jest", "compodoc", "transloco"]
 }

package-lock.json

@@ -20,6 +20,8 @@
         "@angular/router": "^17.3.6",
         "@ng-bootstrap/ng-bootstrap": "^16.0.0",
         "@ngneat/transloco": "^6.0.4",
+        "ag-grid-angular": "^32.0.2",
+        "ag-grid-community": "^32.0.2",
         "bootstrap": "^5.3.3",
         "ng": "^0.0.0",
         "rxjs": "~7.8.1",
@@ -8108,6 +8110,35 @@
         "node": ">=8.9.0"
       }
     },
+    "node_modules/ag-charts-types": {
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-10.0.2.tgz",
+      "integrity": "sha512-Nxo5slHOXlaeg0gRIsVnovAosQzzlYfWJtdDy0Aq/VvpJru/PJ+5i2c9aCyEhgRxhBjImsoegwkgRj7gNOWV6Q==",
+      "license": "MIT"
+    },
+    "node_modules/ag-grid-angular": {
+      "version": "32.0.2",
+      "resolved": "https://registry.npmjs.org/ag-grid-angular/-/ag-grid-angular-32.0.2.tgz",
+      "integrity": "sha512-GU9m0hCgBK6DqrXJ2R8r1Vm+CutCUbgrEXtsQPWlQh9AipW9khvbMF0NzuAYpZrGnk8KI9E9+jhzWhT4ZWLOTw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">= 16.0.0",
+        "@angular/core": ">= 16.0.0",
+        "ag-grid-community": "32.0.2"
+      }
+    },
+    "node_modules/ag-grid-community": {
+      "version": "32.0.2",
+      "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-32.0.2.tgz",
+      "integrity": "sha512-vLJJUjnsG9hNK41GNuW2EHu1W264kxA/poOpcX4kmyrjU5Uzvelsbj3HdKAO9POV28iqyRdKGYfAWdn8QzA7KA==",
+      "license": "MIT",
+      "dependencies": {
+        "ag-charts-types": "10.0.2"
+      }
+    },
     "node_modules/agent-base": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",

package.json

@@ -57,6 +57,8 @@
     "@angular/router": "^17.3.6",
     "@ng-bootstrap/ng-bootstrap": "^16.0.0",
     "@ngneat/transloco": "^6.0.4",
+    "ag-grid-angular": "^32.0.2",
+    "ag-grid-community": "^32.0.2",
     "bootstrap": "^5.3.3",
     "ng": "^0.0.0",
     "rxjs": "~7.8.1",

src/app/app.module.ts

@@ -12,6 +12,7 @@ import { RouterModule } from '@angular/router';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { MainNavigationComponent } from './main-navigation/main-navigation.component';
 import { DropdownNavButtonComponent } from './dropdown-nav-button/dropdown-nav-button.component';
+import { AgGridModule } from 'ag-grid-angular';
 
 @NgModule({
   imports: [
@@ -22,14 +23,10 @@ import { DropdownNavButtonComponent } from './dropdown-nav-button/dropdown-nav-b
     NgbModule,
     TranslocoRootModule,
     RouterModule.forRoot([{ path: '', component: ScoutingCryptoComponent }]),
-  ],
-  declarations: [
     ScoutingCryptoComponent,
-    HomeComponent,
-    AppComponent,
-    MainNavigationComponent,
-    DropdownNavButtonComponent,
+    // AgGridModule.withComponents([]),
   ],
+  declarations: [HomeComponent, AppComponent, MainNavigationComponent, DropdownNavButtonComponent],
   providers: [],
   bootstrap: [AppComponent],
 })

src/app/scouting-crypto/scouting-crypto.component.html

@@ -1 +1,4 @@
 <p>scouting-crypto works!</p>
+
+<!-- The AG Grid component -->
+<ag-grid-angular class="ag-theme-quartz" style="height: 500px" [rowData]="rowData" [columnDefs]="colDefs" />

src/app/scouting-crypto/scouting-crypto.component.ts

@@ -1,8 +1,22 @@
 import { Component } from '@angular/core';
+import { AgGridAngular } from 'ag-grid-angular'; // Angular Data Grid Component
+import { ColDef } from 'ag-grid-community'; // Column Definition Type Interface
 
 @Component({
   selector: 'app-scouting-crypto',
   templateUrl: './scouting-crypto.component.html',
   styleUrl: './scouting-crypto.component.css',
+  imports: [AgGridAngular],
+  standalone: true,
 })
-export class ScoutingCryptoComponent {}
+export class ScoutingCryptoComponent {
+  // Row Data: The data to be displayed.
+  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' }, { field: 'price' }, { field: 'electric' }];
+}