iwa_252490/project/frontend-angular/src/app/grade-student/grade-student.html

<div>
  <div>
    <label for="search">Search by Name:</label>
    <input type="text" id="search" [(ngModel)]="searchTerm" (input)="filterSubjects()" placeholder="Enter subject name">
  </div>
  <div>
    <table>
      <thead>
      <tr>
        <th>
          Subject 
          @if (sortDirection==='desc') {
            <span (click)="sortByName()">↓</span>
          }
          @if (sortDirection==='asc') {
            <span (click)="sortByName()">↑</span>
          }
        </th>
        <th>Grades</th>
      </tr>
      </thead>
      <tbody>
      <ng-container *ngFor="let subject of filteredSubjectList; index as i">
        <tr [class.even-row]="i % 2 === 1">
          <td>{{ subject.name }}</td>
          <td>
            <ul *ngFor="let grade of gradeList">
              @if (grade.subject.id === subject.id) {
                <li>{{ grade.grade }}</li>
              }
            </ul>
          </td>
        </tr>
      </ng-container>
      </tbody>
    </table>
  </div>
</div>