<!-- <p>
    <button mat-button>Click me!</button>
</p> -->
<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <ng-container matColumnDef="Description">
        <th mat-header-cell *matHeaderCellDef> Description </th>
        <td mat-cell *matCellDef="let element"> {{element.Description}} </td>
      </ng-container>
      <ng-container matColumnDef="IsExpense">
        <th mat-header-cell *matHeaderCellDef> Type </th>
        <td mat-cell *matCellDef="let element"> {{element.IsExpense ? 'Expense' : 'Income'}} </td>
      </ng-container>
      <ng-container matColumnDef="Value">
        <th mat-header-cell *matHeaderCellDef> Value </th>
        <td mat-cell *matCellDef="let element"> {{element.Value}} </td>
      </ng-container>

      <ng-container matColumnDef="Actions">
        <th mat-header-cell *matHeaderCellDef> Actions </th>
        <td mat-cell *matCellDef="let element">
          <button (click)="updateEntry(element)" mat-raised-button color="primary">
            <mat-icon color="white">edit</mat-icon> <b>Edit</b>
          </button>
          <span> </span>
          <button [routerLink]="['/delete-entry',element.Id]" mat-raised-button color="warn">
            <mat-icon color="white">delete_sweep</mat-icon> <b>Delete</b>
          </button>
        </td>
      </ng-container>

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

<mat-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>