Add simply example for retrieving data from the api

src/Vegasco-Web/angular.json

@@ -59,6 +59,9 @@
         },
         "serve": {
           "builder": "@angular/build:dev-server",
+          "options": {
+            "proxyConfig": "proxy.config.js"
+          },
           "configurations": {
             "production": {
               "buildTarget": "Vegasco-Web:build:production"

src/Vegasco-Web/proxy.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  "/api": {
+    target:
+      process.env["services__Vegasco-Server-Api__https__0"] ||
+      process.env["services__Vegasco-Server-Api__http__0"],
+    secure: process.env["NODE_ENV"] !== "development",
+    pathRewrite: {
+      "^/api": "",
+    },
+  },
+};

src/Vegasco-Web/src/app/app.config.ts

@@ -2,11 +2,13 @@ import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChang
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
+import {provideHttpClient} from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
     provideZoneChangeDetection({ eventCoalescing: true }),
-    provideRouter(routes)
+    provideRouter(routes),
+    provideHttpClient(),
   ]
 };

src/Vegasco-Web/src/app/app.html

@@ -133,9 +133,11 @@
   .pill-group .pill:nth-child(6n + 1) {
     --pill-accent: var(--bright-blue);
   }
+
   .pill-group .pill:nth-child(6n + 2) {
     --pill-accent: var(--french-violet);
   }
+
   .pill-group .pill:nth-child(6n + 3),
   .pill-group .pill:nth-child(6n + 4),
   .pill-group .pill:nth-child(6n + 5) {
@@ -158,6 +160,10 @@
     fill: var(--gray-400);
   }
 
+  td, th {
+    padding: .5rem;
+  }
+
   .social-links a:hover svg path {
     fill: var(--gray-900);
   }
@@ -222,11 +228,35 @@
             <stop offset=".526" stop-color="#CC26D5"/>
             <stop offset="1" stop-color="#7702FF"/>
           </linearGradient>
-          <clipPath id="a"><path fill="#fff" d="M0 0h982v239H0z" /></clipPath>
+          <clipPath id="a">
+            <path fill="#fff" d="M0 0h982v239H0z"/>
+          </clipPath>
         </defs>
       </svg>
       <h1>Hello, {{ title }}</h1>
       <p>Congratulations! Your app is running. 🎉</p>
+      <div>
+        @if (serverInfo$ | async; as serverInfo) {
+          <table>
+            <thead>
+              <tr>
+                <th>Version</th>
+                <th>Commit ID</th>
+                <th>Commit Date</th>
+                <th>Environment</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>{{ serverInfo.fullVersion }}</td>
+                <td>{{ serverInfo.commitId }}</td>
+                <td>{{ serverInfo.commitDate | date:"dd.MM.yyyy HH:mm:ss" }}</td>
+                <td>{{ serverInfo.environment }}</td>
+              </tr>
+            </tbody>
+          </table>
+        }
+      </div>
     </div>
     <div class="divider" role="separator" aria-label="Divider"></div>
     <div class="right-side">

src/Vegasco-Web/src/app/app.ts

@@ -1,12 +1,33 @@
-import { Component } from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {RouterOutlet} from '@angular/router';
+import {HttpClient} from '@angular/common/http';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {AsyncPipe, DatePipe} from '@angular/common';
+import {tap} from 'rxjs';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet],
+  imports: [AsyncPipe, DatePipe, RouterOutlet],
   templateUrl: './app.html',
   styleUrl: './app.scss'
 })
 export class App {
   protected title = 'Vegasco-Web';
+
+  private readonly http = inject(HttpClient);
+
+  protected readonly serverInfo$;
+
+  constructor() {
+    this.serverInfo$ = this.http.get<ServerInfo>('/api/v1/info/server')
+      .pipe(takeUntilDestroyed());
   }
+}
+
+interface ServerInfo {
+  fullVersion: string;
+  commitId: string;
+  commitDate: string;
+  environment: string;
+}
+