Adding Angular Material and

angular.json

@@ -32,6 +32,7 @@
               }
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/azure-blue.css",
               "src/styles.scss"
             ],
             "scripts": []
@@ -91,6 +92,7 @@
               }
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/azure-blue.css",
               "src/styles.scss"
             ],
             "scripts": []

package-lock.json

@@ -9,10 +9,12 @@
       "version": "0.0.0",
       "dependencies": {
         "@angular/animations": "^19.0.0",
+        "@angular/cdk": "^19.0.3",
         "@angular/common": "^19.0.0",
         "@angular/compiler": "^19.0.0",
         "@angular/core": "^19.0.0",
         "@angular/forms": "^19.0.0",
+        "@angular/material": "^19.0.3",
         "@angular/platform-browser": "^19.0.0",
         "@angular/platform-browser-dynamic": "^19.0.0",
         "@angular/router": "^19.0.0",
@@ -361,6 +363,23 @@
         }
       }
     },
+    "node_modules/@angular/cdk": {
+      "version": "19.0.3",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-19.0.3.tgz",
+      "integrity": "sha512-sPdIKbSgNk4z02FqdTTMUS62aLVA2R/DsnOk3qdH+nEfeS4nNWQEzwrvMf6dDsTeLQ6YJLWXfZfemsGYpOoiWg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "optionalDependencies": {
+        "parse5": "^7.1.2"
+      },
+      "peerDependencies": {
+        "@angular/common": "^19.0.0 || ^20.0.0",
+        "@angular/core": "^19.0.0 || ^20.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@angular/cli": {
       "version": "19.0.5",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-19.0.5.tgz",
@@ -494,6 +513,24 @@
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
+    "node_modules/@angular/material": {
+      "version": "19.0.3",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-19.0.3.tgz",
+      "integrity": "sha512-aHAnmEzoE6nEF7S/lBlMwDMs6ZEkvE3omg9g6jY6WyKWtP9HYeCfwxmTPVclqcbXWxJWO/5Bvwfcjzs75uC+YA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": "^19.0.0 || ^20.0.0",
+        "@angular/cdk": "19.0.3",
+        "@angular/common": "^19.0.0 || ^20.0.0",
+        "@angular/core": "^19.0.0 || ^20.0.0",
+        "@angular/forms": "^19.0.0 || ^20.0.0",
+        "@angular/platform-browser": "^19.0.0 || ^20.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@angular/platform-browser": {
       "version": "19.0.4",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-19.0.4.tgz",
@@ -7846,7 +7883,7 @@
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
@@ -12637,7 +12674,7 @@
       "version": "7.2.1",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz",
       "integrity": "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "entities": "^4.5.0"

package.json

@@ -13,10 +13,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^19.0.0",
+    "@angular/cdk": "^19.0.3",
     "@angular/common": "^19.0.0",
     "@angular/compiler": "^19.0.0",
     "@angular/core": "^19.0.0",
     "@angular/forms": "^19.0.0",
+    "@angular/material": "^19.0.3",
     "@angular/platform-browser": "^19.0.0",
     "@angular/platform-browser-dynamic": "^19.0.0",
     "@angular/router": "^19.0.0",

src/app/app.component.html

@@ -1,8 +1,23 @@
-@for (employee of $employees | async ; track employee.id) {
+@if ($employees | async; as employees) {
-    <code style="white-space: pre-wrap">
+    <mat-tree #tree [dataSource]="employees" [childrenAccessor]="childrenAccessor">
-        {{ employee | json}}
+        <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
-    </code>
+            {{ node.firstName }}
-    <hr>
+            @if (tree.isExpanded(node)) {
+                <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'Toggle ' + node.id">
+                    <mat-icon>expand_more</mat-icon>
+                </button>
+                <ul>
+                    @for (entry of node | keyvalue; track entry) {
+                        <li>{{ entry.key }}: <code>{{ entry.value }}</code></li>
+                    }
+                </ul>
+            } @else {
+                <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'Toggle ' + node.id">
+                    <mat-icon>chevron_right</mat-icon>
+                </button>
+            }
+        </mat-tree-node>
+    </mat-tree>
 }
 
-<router-outlet />
+<router-outlet/>

src/app/app.component.ts

@@ -1,17 +1,21 @@
-import {AsyncPipe, JsonPipe} from '@angular/common';
+import {AsyncPipe, KeyValuePipe} from '@angular/common';
 import {Component} from '@angular/core';
+import {MatIconButton} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
+import {MatTree, MatTreeModule} from '@angular/material/tree';
 import { RouterOutlet } from '@angular/router';
 import { EmployeeControllerService, FindAll1Response } from '@core/ems';
 import { Observable } from 'rxjs';
 
 @Component({
     selector: 'app-root',
-    imports: [RouterOutlet, JsonPipe, AsyncPipe],
+    imports: [RouterOutlet, AsyncPipe, MatIconModule, MatTree, MatTreeModule, KeyValuePipe, MatIconButton],
     templateUrl: './app.component.html',
     styleUrl: './app.component.scss'
 })
 export class AppComponent{
     readonly $employees: Observable<FindAll1Response>;
+    childrenAccessor = () => [];
 
     constructor(private apiClient: EmployeeControllerService) {
         this.$employees = this.apiClient.findAll1();

src/app/app.config.ts

@@ -5,13 +5,13 @@ import { provideRouter } from '@angular/router';
 import { routes } from '@app/app.routes';
 import { OpenAPI } from '@core/ems/core/OpenAPI';
 OpenAPI.BASE = 'http://localhost:8080';
-OpenAPI.TOKEN = 'eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICIzUFQ0dldiNno5MnlQWk1EWnBqT1U0RjFVN0lwNi1ELUlqQWVGczJPbGU0In0.eyJleHAiOjE3MzQ1MTY5MTQsImlhdCI6MTczNDUxMzMxNCwianRpIjoiMjk2MzAwNTQtMWI2Ni00ODIyLWFiMGItNmI5NjlkZDg4MTRkIiwiaXNzIjoiaHR0cHM6Ly9rZXljbG9hay5zenV0LmRldi9hdXRoL3JlYWxtcy9zenV0IiwiYXVkIjoiYWNjb3VudCIsInN1YiI6IjU1NDZjZDIxLTk4NTQtNDMyZi1hNDY3LTRkZTNlZWRmNTg4OSIsInR5cCI6IkJlYXJlciIsImF6cCI6ImVtcGxveWVlLW1hbmFnZW1lbnQtc2VydmljZSIsInNlc3Npb25fc3RhdGUiOiJhMDIzMmNhMy0yZjM3LTQ3OTctYThkMC0zNjJhNzBlODY1MDMiLCJhY3IiOiIxIiwiYWxsb3dlZC1vcmlnaW5zIjpbImh0dHA6Ly9sb2NhbGhvc3Q6NDIwMCJdLCJyZWFsbV9hY2Nlc3MiOnsicm9sZXMiOlsicHJvZHVjdF9vd25lciIsIm9mZmxpbmVfYWNjZXNzIiwiZGVmYXVsdC1yb2xlcy1zenV0IiwidW1hX2F1dGhvcml6YXRpb24iLCJ1c2VyIl19LCJyZXNvdXJjZV9hY2Nlc3MiOnsiYWNjb3VudCI6eyJyb2xlcyI6WyJtYW5hZ2UtYWNjb3VudCIsIm1hbmFnZS1hY2NvdW50LWxpbmtzIiwidmlldy1wcm9maWxlIl19fSwic2NvcGUiOiJlbWFpbCBwcm9maWxlIiwiZW1haWxfdmVyaWZpZWQiOnRydWUsInByZWZlcnJlZF91c2VybmFtZSI6InVzZXIifQ.evYkQetnwJWgzHjSRrZyN1Ls-fpdBsM0KYwp0RKcsgrg4w4p-WMnFGDch_1kFWflMq9i3J_sAhsPcFhvCiKEpo5xca9yj0-20GMUZXH7aNwCneqGur2f9wh3k8nQdoYsuwKTfKpGSsNWTQ20rV7CqHIne-lD2rayhb2wHwOsbklsSf0K9s37EKPwASfln4g1KGTbBpwFDz8p75Vhr5HqlaCJUxN-NMYKM41_2ao8ykhCVkKRk7cZwjKfB3MOk5Xk8l0NHcPBp8G_pOyrjyqC-fGekcxEF1ucYSWqw4r_PsUTeLkO8M-RK0h798JWq7l-OcODgxr4qhx-ungUPnGFxw';
+OpenAPI.TOKEN = 'eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICIzUFQ0dldiNno5MnlQWk1EWnBqT1U0RjFVN0lwNi1ELUlqQWVGczJPbGU0In0.eyJleHAiOjE3MzQ1MjA4MzgsImlhdCI6MTczNDUxNzIzOCwianRpIjoiODVkM2NlNDQtM2QwMS00MDFkLTlhY2YtZjFhZTMwNzQzMDRmIiwiaXNzIjoiaHR0cHM6Ly9rZXljbG9hay5zenV0LmRldi9hdXRoL3JlYWxtcy9zenV0IiwiYXVkIjoiYWNjb3VudCIsInN1YiI6IjU1NDZjZDIxLTk4NTQtNDMyZi1hNDY3LTRkZTNlZWRmNTg4OSIsInR5cCI6IkJlYXJlciIsImF6cCI6ImVtcGxveWVlLW1hbmFnZW1lbnQtc2VydmljZSIsInNlc3Npb25fc3RhdGUiOiJiOWI3OGQ0ZS1jM2E4LTRiOWQtODdmMy04N2FiNzhjYzQyYTMiLCJhY3IiOiIxIiwiYWxsb3dlZC1vcmlnaW5zIjpbImh0dHA6Ly9sb2NhbGhvc3Q6NDIwMCJdLCJyZWFsbV9hY2Nlc3MiOnsicm9sZXMiOlsicHJvZHVjdF9vd25lciIsIm9mZmxpbmVfYWNjZXNzIiwiZGVmYXVsdC1yb2xlcy1zenV0IiwidW1hX2F1dGhvcml6YXRpb24iLCJ1c2VyIl19LCJyZXNvdXJjZV9hY2Nlc3MiOnsiYWNjb3VudCI6eyJyb2xlcyI6WyJtYW5hZ2UtYWNjb3VudCIsIm1hbmFnZS1hY2NvdW50LWxpbmtzIiwidmlldy1wcm9maWxlIl19fSwic2NvcGUiOiJlbWFpbCBwcm9maWxlIiwiZW1haWxfdmVyaWZpZWQiOnRydWUsInByZWZlcnJlZF91c2VybmFtZSI6InVzZXIifQ.I3CGELu7IXrh5kYapp-v54c-R8hNqZOtvpmR98NhoTCrOVUoA-V16ayhF42qQ3Pj2YymxENpQWHR1-BTFQOJmAhQKBzvKWgOHuiLCPr8NkMGWFQ520BcJdipbGnsM8tmXuLE9FWezHA7LEGVkwY2gTbQMLEPq8v8hrtIf76F2Dq34BIG3Nq_6QlG10rG_Heqta6kWWe2p4DJmebdpvAeW2qvTLD4x89oIhtYXSiRIiVS2uAur5XuJcjpbv8UXWx11zVX7KelZEXky92q_xPKerFMOGt6up5MkCijJBhVWewSWNldaix7_jKTXCp70Gtu4sgCIuoojKp9Nts942RZjw';
 
 export const appConfig: ApplicationConfig = {
     providers: [
         provideZoneChangeDetection({ eventCoalescing: true }),
         provideRouter(routes),
         provideHttpClient(),
-        provideAnimationsAsync()
+        provideAnimationsAsync(), provideAnimationsAsync()
     ],
 };

src/index.html

@@ -6,8 +6,10 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
-<body>
+<body class="mat-typography">
   <app-root></app-root>
 </body>
 </html>

src/styles.scss

@@ -1 +1,10 @@
 /* You can add global styles to this file, and also import other style files */
+
+html, body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}