kfmc_website/src/app/trainning-service/all-requests/all-requests.component.html

<div class="container">

    <div class="row">
      <div class="col-12">
          <ul class="list-unstyled titileLi-w">
            <li class="headingText-w" style="cursor: pointer;" (click)="authSer.perviousLocation()">خدمه التدريب</li>
            <li class="headingText-w activeLi-w" style="margin-right:5px">طلباتي</li>
          </ul>
      </div>
    </div>

    <div class="containerContent-w" style="text-align: center;">
      <div class="col-12 "  *ngIf="requests.length == 0 " >
        <h2 class="title">لا يوجد بيانات لعرضها </h2>

      </div>
        <table class="table table-bordered" *ngIf="requests.length != 0 " >
            <thead class="headBackground-w">
              <tr>
                <th>الحاله</th>
                <th> فتره التدريب</th>
                <th>نوع التدريب</th>
                <th>التخصص العام</th>
                <th>التخصص الدقيق</th>
                <th>الأوامر</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let data of requests; let i = index " style="text-align:center">
                <td>{{data.status == 'pending' ? 'تحت الإجراء' : '....'}}</td>
                <td>{{data.training_period}}</td>
                <td>{{data.type}}</td>
                <td>{{data.specialization_name}}</td>
                <td>{{data.specific_specialization}}</td>

                <td>
                  <button *ngIf=" data.status == 'pending' " type="button" class="btn btn-outline-secondary" (click)="onEdit(data)"><i class="fas fa-edit"></i></button>
                  <span *ngIf="data.status != 'pending'">غير مسموح</span>
                </td>
              </tr>
            </tbody>
          </table>
    </div>
  </div>