first

frontend/src/app/hello-list/hello-list.component.html

@@ -0,0 +1,8 @@
+<h3>List of Hellos</h3>
+<ul>
+  @for(e of employees$ | async; track e.id) {
+    <li>
+      {{e.id }}, {{e.message}}
+    </li>
+  }
+</ul>

frontend/src/app/hello-list/hello-list.component.ts

@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+import {Observable, of} from "rxjs";
+import {Hello} from "../Hello";
+import {HttpClient, HttpClientModule, HttpHeaders, provideHttpClient} from "@angular/common/http";
+import {AsyncPipe} from "@angular/common";
+import {KeycloakService} from "keycloak-angular";
+
+@Component({
+  selector: 'app-hello-list',
+  standalone: true,
+  imports: [
+    AsyncPipe
+  ],
+  providers: [KeycloakService],
+  templateUrl: './hello-list.component.html',
+  styleUrl: './hello-list.component.css'
+})
+export class HelloListComponent {
+  employees$: Observable<Hello[]>;
+
+  constructor(private http: HttpClient) {
+    this.employees$ = of([]);
+    this.fetchData();
+  }
+
+  fetchData() {
+    this.employees$ = this.http.get<Hello[]>('/backend/hellos');
+  }
+
+
+}