html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<body>
  <p class="page-title">
    Lista zwierząt
  </p>
  <div class="filter">
    <mat-form-field appearance="fill">
      <mat-label>
        <mat-icon>search</mat-icon>
        Search animals by name
      </mat-label>
      <input matInput (keyup)="applyFilter($event)" placeholder="Search">
    </mat-form-field>

    <mat-form-field appearance="fill" *ngFor="let aFilter of aFilters">
      <mat-label>{{ aFilter.name }}</mat-label>
      <mat-select [(value)]="aFilter.defaultValue" (selectionChange)="applyEmpFilter($event, aFilter)">
        <mat-option *ngFor="let option of aFilter.options" [value]="option">{{ option }}</mat-option>
      </mat-select>
    </mat-form-field>
  </div>

  <table *ngIf="dataSource" mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <!-- Column definitions -->
    <ng-container matColumnDef="Name">
      <th mat-header-cell *matHeaderCellDef matSort mat-sort-header>Name</th>
      <td mat-cell *matCellDef="let animal">{{ animal.animalName }}</td>
    </ng-container>

    <ng-container matColumnDef="Breed">
      <th mat-header-cell *matHeaderCellDef matSort mat-sort-header>Breed</th>
      <td mat-cell *matCellDef="let animal">{{ animal.animalBreed }}</td>
    </ng-container>

    <ng-container matColumnDef="Species">
      <th mat-header-cell *matHeaderCellDef matSort mat-sort-header>Species</th>
      <td mat-cell *matCellDef="let animal">{{ animal.animalSpecies }}</td>
    </ng-container>

    <ng-container matColumnDef="Sex">
      <th mat-header-cell *matHeaderCellDef matSort mat-sort-header>Sex</th>
      <td mat-cell *matCellDef="let animal">{{ animal.sex == '1' ? 'Male' : 'Female' }}</td>
    </ng-container>

    <ng-container matColumnDef="Size">
      <th mat-header-cell *matHeaderCellDef matSort mat-sort-header>Size</th>
      <td mat-cell *matCellDef="let animal">{{ animal.size }}</td>
    </ng-container>

    <ng-container matColumnDef="Birthday">
      <th mat-header-cell *matHeaderCellDef matSort mat-sort-header>Birthday</th>
      <td mat-cell *matCellDef="let animal">{{ calculateAge(animal.birthdayDate) }}</td>
    </ng-container>

    <ng-container matColumnDef="Founded">
      <th mat-header-cell *matHeaderCellDef matSort mat-sort-header>Founded</th>
      <td mat-cell *matCellDef="let animal">{{ animal.foundedDate | date }}</td>
    </ng-container>

    <!-- Column headers -->
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

    <!-- Table rows -->
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
  <mat-paginator
                 [length]="(dataSource?.data?.length ?? 0)"
                 [pageSize]="pageSize"
                 [pageSizeOptions]="pageSizeOptions"
                 [showFirstLastButtons]="showFirstLastButtons"
                 (page)="handlePageEvent($event)"
                 class="paginator">
  </mat-paginator>
</body>
Editor is loading...