typescript 69 lines · 9 steps

Paginating a CDK table with Angular signals

A standalone Angular component pairs the CDK table with signals so pagination stays reactive and derived state recomputes itself.

Explained by highlit

Angular Intermediate signals computed-state pagination cdk-table reactivity

1import { Component, computed, signal } from '@angular/core';
2import { CdkTableModule } from '@angular/cdk/table';
3import { CdkScrollableModule } from '@angular/cdk/scrolling';
4 
5interface Invoice {
6  id: string;
7  customer: string;
8  amount: number;
9  status: 'paid' | 'pending' | 'overdue';
10}
11 
12@Component({
13  selector: 'app-invoice-table',
14  standalone: true,
15  imports: [CdkTableModule, CdkScrollableModule],
16  template: `
17    <cdk-table [dataSource]="page()" [trackBy]="trackById" class="invoice-table">
18      <ng-container cdkColumnDef="customer">
19        <cdk-header-cell *cdkHeaderCellDef>Customer</cdk-header-cell>
20        <cdk-cell *cdkCellDef="let row">{{ row.customer }}</cdk-cell>
21      </ng-container>
22 
23      <ng-container cdkColumnDef="amount">
24        <cdk-header-cell *cdkHeaderCellDef>Amount</cdk-header-cell>
25        <cdk-cell *cdkCellDef="let row">{{ row.amount | currency }}</cdk-cell>
26      </ng-container>
27 
28      <ng-container cdkColumnDef="status">
29        <cdk-header-cell *cdkHeaderCellDef>Status</cdk-header-cell>
30        <cdk-cell *cdkCellDef="let row" [attr.data-status]="row.status">{{ row.status }}</cdk-cell>
31      </ng-container>
32 
33      <cdk-header-row *cdkHeaderRowDef="columns"></cdk-header-row>
34      <cdk-row *cdkRowDef="let row; columns: columns"></cdk-row>
35    </cdk-table>
36 
37    <nav class="pager">
38      <button (click)="prev()" [disabled]="pageIndex() === 0">Prev</button>
39      <span>Page {{ pageIndex() + 1 }} of {{ totalPages() }}</span>
40      <button (click)="next()" [disabled]="pageIndex() >= totalPages() - 1">Next</button>
41    </nav>
42  `,
43})
44export class InvoiceTableComponent {
45  readonly columns = ['customer', 'amount', 'status'];
46  readonly pageSize = 20;
47 
48  invoices = signal<Invoice[]>([]);
49  pageIndex = signal(0);
50 
51  totalPages = computed(() => Math.max(1, Math.ceil(this.invoices().length / this.pageSize)));
52 
53  page = computed(() => {
54    const start = this.pageIndex() * this.pageSize;
55    return this.invoices().slice(start, start + this.pageSize);
56  });
57 
58  trackById(_: number, row: Invoice): string {
59    return row.id;
60  }
61 
62  next(): void {
63    this.pageIndex.update((i) => Math.min(i + 1, this.totalPages() - 1));
64  }
65 
66  prev(): void {
67    this.pageIndex.update((i) => Math.max(i - 1, 0));
68  }
69}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Deriving state with computed signals keeps pagination in sync without manual recalculation.
2trackBy lets the CDK table reuse DOM rows across data changes instead of rebuilding them.
3signal.update takes the current value, making bounded increments like page navigation safe and self-contained.

Related explainers

typescript

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';
import localeDe from '@angular/common/locales/de';

Locale-aware bootstrapping in Angular

i18n localization dependency-injection

Intermediate 8 steps

typescript

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import * as Joi from 'joi';

Validating env config at boot in NestJS

configuration schema-validation environment-variables

Intermediate 8 steps

typescript

import { Inject, Injectable, Logger } from '@nestjs/common';
import { CACHE_MANAGER } from '@nestjs/cache-manager';
import { Cache } from 'cache-manager';
import { InjectRepository } from '@nestjs/typeorm';

A cache-aside country lookup in NestJS

cache-aside dependency-injection batch-lookup

Intermediate 8 steps

typescript

import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence

Intermediate 7 steps

typescript

import { useEffect, useState } from "react";
 
interface Section {
  id: string;

Building a scroll-spy hook in React

custom-hooks intersectionobserver dom-observation

Intermediate 8 steps

typescript

import { Injectable, Scope, Inject, NotFoundException } from '@nestjs/common';
import { REQUEST } from '@nestjs/core';
import { Request } from 'express';
import { DataSource } from 'typeorm';