Convert qualifications to table

src/app/qualifications/qualifications.component.html

@@ -1,7 +1,22 @@
-<ul>
-  @for (qualification of qualifications$ | async; track qualification.skill) {
-    <li>
-      {{ qualification.skill }}
-    </li>
+@if (qualifications$ | async; as qualifications) {
+    @if (qualifications) {
+        <table
+                mat-table
+                [dataSource]="qualifications"
+                class="mat-elevation-z8"
+        >
+            <ng-container matColumnDef="skill">
+                <th mat-header-cell *matHeaderCellDef>Skill</th>
+                <td mat-cell *matCellDef="let qualification">{{ qualification.skill }}</td>
+            </ng-container>
+
+            <ng-container matColumnDef="actions">
+                <th mat-header-cell *matHeaderCellDef>Actions</th>
+                <td mat-cell *matCellDef="let qualification"></td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+        </table>
     }
-</ul>
+}

src/app/qualifications/qualifications.component.ts

@@ -1,21 +1,40 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 import {Observable} from "rxjs";
-import {Employee} from "../Employee";
 import {Qualification} from "../Qualification";
 import {HttpClient} from "@angular/common/http";
-import {MatSnackBar} from "@angular/material/snack-bar";
 import {AsyncPipe} from "@angular/common";
+import {
+    MatCell,
+    MatCellDef,
+    MatColumnDef,
+    MatHeaderCell,
+    MatHeaderCellDef,
+    MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef,
+    MatTable
+} from "@angular/material/table";
 
 @Component({
     selector: 'app-qualifications',
     imports: [
-    AsyncPipe
+        AsyncPipe,
+        MatTable,
+        MatHeaderCell,
+        MatColumnDef,
+        MatCell,
+        MatCellDef,
+        MatHeaderCellDef,
+        MatHeaderRow,
+        MatRow,
+        MatHeaderRowDef,
+        MatRowDef
     ],
     templateUrl: './qualifications.component.html',
     styleUrl: './qualifications.component.css'
 })
 export class QualificationsComponent {
     public qualifications$: Observable<Qualification[]>;
+    public readonly displayedColumns: string[] = ['skill', 'actions'];
+
 
     constructor(
         private readonly httpClient: HttpClient,