rendering servers as accordion items

ng/src/app/components/admin/admin-panel/admin-panel.component.html

@@ -1 +1,14 @@
 <p>admin-panel works!</p>
+
+<div class="accordion" id="accordionExample">
+  <div *ngFor="let serverConfig of serverConfigs" class="accordion-item">
+    <h2 class="accordion-header" id="headingOne">
+      <button class="accordion-button" type="button" data-bs-toggle="collapse" [attr.data-bs-target]="'#server_' + serverConfig.id">
+        {{ serverConfig.title }}
+      </button>
+    </h2>
+    <div id="server_{{ serverConfig.id }}" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
+      <div class="accordion-body"></div>
+    </div>
+  </div>
+</div>

ng/src/app/components/admin/admin-panel/admin-panel.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { AdminPanelService } from '../../../services/admin-panel.service';
+import { ServerApiService } from '../../../services/server-api.service';
 
 @Component({
   selector: 'app-admin-panel',
@@ -7,9 +8,11 @@ import { AdminPanelService } from '../../../services/admin-panel.service';
   styleUrls: ['./admin-panel.component.scss']
 })
 export class AdminPanelComponent implements OnInit {
-  constructor(private adminService: AdminPanelService) {}
+  public serverConfigs: ServerConfig[] = [];
 
-  ngOnInit(): void {
-    this.adminService.loadServer();
+  constructor(private adminService: AdminPanelService, apiService: ServerApiService) {
+    apiService.serverConfigs$.subscribe(data => (this.serverConfigs = data));
   }
+
+  ngOnInit(): void {}
 }