Use service

src/app/qualifications/qualifications.component.ts

@@ -12,6 +12,7 @@ import {
     MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef,
     MatTable
 } from "@angular/material/table";
+import QualificationApiService from "../services/qualification-api.service";
 
 @Component({
     selector: 'app-qualifications',
@@ -36,9 +37,7 @@ export class QualificationsComponent {
     public readonly displayedColumns: string[] = ['skill', 'actions'];
 
 
-    constructor(
-        private readonly httpClient: HttpClient,
-    ) {
-        this.qualifications$ = this.httpClient.get<Qualification[]>('http://localhost:8089/qualifications');
+    constructor(private readonly qualificationApiService: QualificationApiService) {
+        this.qualifications$ = this.qualificationApiService.getAll();
     }
 }

src/app/services/qualification-api.service.ts

@@ -0,0 +1,19 @@
+import {inject, Injectable} from "@angular/core";
+import {HttpClient} from "@angular/common/http";
+import {Observable} from "rxjs";
+import {Employee} from "../Employee";
+import {Qualification} from "../Qualification";
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export default class QualificationApiService {
+  private http: HttpClient = inject(HttpClient);
+
+  private static readonly BASE_URL = 'http://localhost:8089';
+
+  public getAll(): Observable<Qualification[]> {
+    return this.http.get<Qualification[]>(`${QualificationApiService.BASE_URL}/qualifications`)
+  }
+}