Angular - URL State Management-all-employees.component.html

<mat-form-field appearance="fill">
  <mat-label>Filter</mat-label>
  <input
    [formControl]="searchTextControl"
    matInput
    (keyup)="applyFilter($event)"
    placeholder="Ex. Mia"
    #input
  />
</mat-form-field>

<div class="mat-elevation-z8">
  <table
    (matSortChange)="updateRouteParameters(null)"
    mat-table
    [dataSource]="dataSource"
    matSort
  >
    <!-- ID Column -->
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>ID</th>
      <td mat-cell *matCellDef="let row">{{ row.id }}</td>
    </ng-container>

    <!-- Progress Column -->
    <ng-container matColumnDef="salary">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Salary</th>
      <td mat-cell *matCellDef="let row">${{ row.salary }}</td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
      <td mat-cell *matCellDef="let row">{{ row.name }}</td>
    </ng-container>

    <!-- Department Column -->
    <ng-container matColumnDef="department">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Department</th>
      <td mat-cell *matCellDef="let row">{{ row.department }}</td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>

    <!-- Row shown when there is no matching data. -->
    <tr class="mat-row" *matNoDataRow>
      <td class="mat-cell" colspan="4">
        No data matching the filter "{{ input.value }}"
      </td>
    </tr>
  </table>

  <mat-paginator
    (page)="updateRouteParameters($event)"
    [pageSizeOptions]="[10, 25, 100]"
    aria-label="Select page of users"
    showFirstLastButtons
  ></mat-paginator>
</div>