Adding multiple MatPaginators to the same DataSource

Robin — Wed, 22 Jan 2025 22:13:05 +0000

This short guide is for all Angular developers using the Angular Material Library. A customer requested the following feature:

Please show the (Mat)Paginator above and below all tables (which are MatTables).

The problem here: You can only connect a single MatPaginator to a DataSource that holds the data for the table.

First I tried to use templates to display the paginator twice on the same page, but without success. The second paginator didn't work at all.

Second, I thought about implementing the pagination logic by myself, as you do it with server-side pagination. As I had to edit several pages, this did not seem to be the best way to do it.

One step before the final implementation, I also experimented with using different signals to synchronise the properties to the second paginator instance. The final solution is a bit simpler.

Implementation

Template:

<!-- first paginator (standard implementation with some additional options) --> 
<mat-paginator
  pageSize="50"
  [pageSizeOptions]="[10, 25, 50, 100]"
  [showFirstLastButtons]="false">
</mat-paginator>

<!-- MatTable as usual --> 
<table mat-table [dataSource]="dataSource">...</table

<!-- second paginator (synced explicit to the dataSource) -->
@if (dataSource.paginator; as paginator) {
  <mat-paginator
    (page)="pageChanged($event)"
    [pageSize]="paginator.pageSize"
    [length]="paginator.length"
    [pageIndex]="paginator.pageIndex"
    [pageSizeOptions]="paginator.pageSizeOptions"
    [showFirstLastButtons]="paginator.showFirstLastButtons">
  </mat-paginator>
}

Component:

@Component(/* ... */)
export class DocumentListComponent implements AfterViewInit {
  // input of the data
  documents = input.required<Document[]>();

  // dataSource of the table
  dataSource = new MatTableDataSource<Document>();

  // finds the first MatPaginator instance in the view
  @ViewChild(MatPaginator, { static: true })
  paginator!: MatPaginator;

  // listening to changes in the documents input
  constructor() {
    effect(() => (this.dataSource.data = this.documents()));
  }

  // connecting the first paginator to the dataSource
  ngAfterViewInit(): void {
    this.dataSource.paginator = this.paginator;
  }

  // handling page changes from the bottom paginator
  pageChanged(event: PageEvent) {
    const dataSourcePaginator = this.dataSource.paginator;

    if (dataSourcePaginator) {
      dataSourcePaginator.pageIndex = event.pageIndex;
      dataSourcePaginator._changePageSize(event.pageSize);
    }
  }
}

Explanation

How does it work? Implement the MatTable and the first MatPaginator as usual, connect them in the ngAfterViewInit() hook.

The second paginator will not be updated automatically, so we need to pass in all the required properties that we can retrieve from the first paginator, which also controls the displayed data in the table.

Finally we also need to handle the navigation events of the bottom paginator. Therefore we added a pageChanged() method, that updates the state of the first paginator and the dataSource along with it.

Use jest.fakeTimers correctly

Robin — Mon, 04 Dec 2023 12:24:39 +0000

If you are wondering why useFakeTimers() in jest does not seem to work every time, wonder no more! Here is your solution :)

Setup

I needed to write a unit test that checks if a form reset action is executed correctly:

it('should reset form state', () => {
  store.dispatch(new ResetForm());
  expect(store.state.form).toStrictEqual(testData.formDefaults());
});

Problem

The problem were the new Date() calls in the default form state and in the formDefaults() method. Both created a new date object at runtime that was different in milliseconds.

-  "date": 2023-12-04T08:55:27.697Z,
+  "date": 2023-12-04T08:55:27.501Z,

I remembered there were fakeTimers in Jest that I wanted to use. As the docs say, you can call jest.useFakeTimers() anywhere in your test file. So I called it in beforeAll() and got another error.

-  "date": 2023-01-01T00:00:00.000Z,
+  "date": 2023-12-04T09:23:24.315Z,

As you can see, the expected date is now correct (2023-01-01), but the received date is still the current date, which means that the fakeTimers from jest were not executed in the ResetForm action.

Solution

Without going into the details of the NGXS state library that was used, the problem is that the fake timers mock are not present when the state is set up with some default values.

The solution is very simple, just call jest.useFakeTimers(); before importing any modules (very top of file) into your test and you're good to go. 🥳

Of course, you can use your test-setup.ts to set this globally.