bildungdb/src/app/dashboard/dashboard.component.html

<div class="pb-1 mb-4 display-6 border-bottom border-danger">
  Übersicht
</div>

<div class="row row-cols-1 row-cols-md-3 g-4">
    <div class="col">
      <div class="card h-100">
        <img src="../../assets/icons/user_klein.png" class="card-img-top" alt="Lehrlinge">
        <div class="card-body">
          <div class="card-title display-6">Lehrlinge</div>
            <table class="row-border hover table table-striped">
                <thead class="kopf">
                    <th>Name</th>
                    <th>Gruppe</th>    
                    <th>Geschlecht</th>
                </thead>
                <tbody>
                    <tr *ngFor="let aktlehrling of lehrlinge">
                       <!--  [ngClass]="{ 'active': aktlehrling === selectedLehrling }" >-->
                        <td>{{aktlehrling.firstname}} {{aktlehrling.lastname}}</td>
                        <td>{{aktlehrling.groupname}}</td>
                        <td>{{aktlehrling.sex}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="card-footer">
          <small class="text-muted">Letztes Update vor 2 min</small>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card h-100">
      <img src="../../assets/icons/kompetenz.png" class="card-img-top" alt="Kompetenz">
        <div class="card-body">
          <div class="card-title  display-6">Kompetenzen</div>
          <!-- Hier beginnt die Karte Kompetenzen -->
          <table class="table table-striped">
            <thead class="kopf">
                <th>Kompetenz</th>
                <th>Beschreibung</th>   
                <!-- <th>Aktion</th>    -->
            </thead>
            <tbody>
            <tr *ngFor="let aktkomp of kompetenzen">    
                <td>{{aktkomp.competence}}</td>
                <td>{{aktkomp.competencedescription}}</td>
            <!--    <td>
                    <div class="d-grid gap-4 d-md-flex justify-content-md-center">
                    <button type="button" class="btn btn-outline-danger float-right">
                        <img src="../../assets/icons/trash.svg">                
                    </button>&nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-outline-primary ng-click=add_kompetenz float-right"><img src="../../assets/icons/pencil-square.svg"></button>
                    </div>
                </td>
            -->
            </tr>
        </table>
        <!-- Hier endet Kompetenzen -->

        </div>
        <div class="card-footer">
          <small class="text-muted">Last updated 3 mins ago</small>
        </div>
      </div>
    </div>
    <!-- Da beginnt Pruefungen -->
    <div class="col">
      <div class="card h-100">
        <img src="../../assets/icons/pruefung.png" class="card-img-top" alt="...">
        <div class="card-body">
          <div class="card-title  display-6">Pr&uuml;fungen</div>
        <table class="table table-striped">
            <thead class="kopf">
                <th>Pr&uuml;fung</th>
                <th>Beschreibung</th>    
            </thead>
            <tbody>
            <tr *ngFor="let aktpruefung of pruefungen">    
                <td>{{aktpruefung.examshort}}</td>
                <td>{{aktpruefung.examdescription}}</td>
            </tr>
        </table>
                </div>
                <div class="card-footer">
                <small class="text-muted">Last updated 3 mins ago</small>
                </div>
            </div>
            </div>
        </div>