DataGrid streaming data

Data Binding

Streaming Data

Bind the Angular Grid to streaming data and display up-to-date information in tabular form.

Real-time tables help users monitor changing data and make data-driven decisions. This demo uses a local RxJS interval stream so it is license-free, deterministic, and safe for the public website; the same pattern works with WebSocket, Server-Sent Events, or any Observable-based service.

LiveLast tick: 0Price upPrice down

Loading interactive DataGrid example…

Code snippet

      import { Component, OnDestroy } from '@angular/core';
import { interval, Subscription } from 'rxjs';
import { ColumnDef, Datagrid } from '@angular-bootstrap/ngbootstrap';

@Component({
  standalone: true,
  imports: [Datagrid],
  styles: [`
    :host ::ng-deep .live-grid tr.price-up td {
      animation: price-up-flash 1500ms ease-out;
    }

    :host ::ng-deep .live-grid tr.price-down td {
      animation: price-down-flash 1500ms ease-out;
    }

    :host ::ng-deep .live-grid tr.price-up td:nth-child(4) {
      color: var(--bs-primary);
      font-weight: 800;
    }

    :host ::ng-deep .live-grid tr.price-down td:nth-child(4) {
      color: var(--bs-danger);
      font-weight: 800;
    }

    @keyframes price-up-flash {
      from { background-color: rgba(var(--bs-primary-rgb), 0.34); }
      to { background-color: transparent; }
    }

    @keyframes price-down-flash {
      from { background-color: rgba(var(--bs-danger-rgb), 0.3); }
      to { background-color: transparent; }
    }
  `],
  template: `
    <div class="live-grid">
      <ngb-datagrid
        [columns]="columns"
        [data]="quotes"
        [rowClass]="rowClass"
        [trackBy]="trackQuote"
        [enableSorting]="true"
      />
    </div>
  `,
})
export class StreamingQuotesPage implements OnDestroy {
  quotes: MarketQuote[] = seedQuotes();
  private readonly streamSub: Subscription;

  readonly columns: ColumnDef<MarketQuote>[] = [
    { field: 'symbol', header: 'Symbol', sortable: true },
    { field: 'name', header: 'Instrument', sortable: true },
    { field: 'price', header: 'Price', type: 'number', sortable: true },
    { field: 'change', header: 'Change %', type: 'number', sortable: true },
  ];

  constructor(private readonly quoteStream: QuoteStreamService) {
    this.streamSub = this.quoteStream.connect().subscribe((snapshot) => {
      this.quotes = snapshot;
    });
  }

  rowClass = (row: MarketQuote) => ({
    'price-up': row.change > 0,
    'price-down': row.change < 0,
  });

  trackQuote = (_index: number, row: MarketQuote) => row.symbol;

  ngOnDestroy(): void {
    this.streamSub.unsubscribe();
  }
}

API information

API	Type	Usage
`[data]`	`T[]`	Receives each latest snapshot from the stream. Replace the array reference to trigger Angular rendering.
`[trackBy]`	`NgbDatagridTrackByFn<T>`	Keeps row identity stable while values update frequently.
`[rowClass]`	`string \| string[] \| Record<string, boolean> \| ((row, rowIndex) => ...)`	Applies row-level classes from the latest data snapshot, such as positive or negative price movement.
`[columns]`	`ColumnDef<T>[]`	Uses the same column contract as static and remote binding.
`[enableSorting]`	`boolean`	Allows users to sort live snapshots without changing the stream source.
`[pageable]`	`boolean \| NgbDatagridPageableSettings`	Optional for live tables when the stream contains more rows than the visible viewport should show.