Angular  

Live Dashboard: Angular Signals + ASP.NET Core SignalR + SQL Server Change Tracking

Introduction

Modern enterprise applications demand real-time updates — dashboards that instantly reflect data changes without users needing to refresh the page.
With the combined power of Angular Signals, ASP.NET Core SignalR, and SQL Server Change Tracking, you can build such a system that is both performant and scalable.

This article explains step-by-step how to design a live dashboard that updates instantly when data changes in your database — using an efficient full-stack approach.

Concept Overview

Let’s first understand what each technology contributes:

TechnologyPurpose
Angular SignalsEfficiently re-renders UI when reactive data changes
SignalR (ASP.NET Core)Enables real-time client-server communication using WebSockets
SQL Change TrackingDetects data modifications (INSERT/UPDATE/DELETE) at the database level

These three together create a real-time reactive loop between SQL Server, API, and Angular.

Architecture Flow

Here’s the flow of data in this setup:

  1. SQL Server detects a change via Change Tracking.

  2. ASP.NET Core API listens for change notifications (using a background service or polling).

  3. When a change is detected, SignalR broadcasts the update to all connected clients.

  4. Angular receives the SignalR event and updates the Signal state.

  5. The UI updates instantly — no page reload needed.

Flow Diagram

SQL Server (Change Tracking)
        │
        ▼
ASP.NET Core Background Service
        │
  (SignalR Hub Push)
        ▼
Angular Client (Signal Receiver)
        │
     Angular Signals
        ▼
     Live Dashboard UI

Step-by-Step Implementation

Step 1: Enable Change Tracking in SQL Server

ALTER DATABASE [YourDatabase]
SET CHANGE_TRACKING = ON
(CHANGE_RETENTION = 7 DAYS, AUTO_CLEANUP = ON);

ALTER TABLE [dbo].[Sales]  
ENABLE CHANGE_TRACKING  
WITH (TRACK_COLUMNS_UPDATED = ON);

This allows SQL Server to track which rows are inserted, updated, or deleted.

Step 2: Create ASP.NET Core SignalR Hub

using Microsoft.AspNetCore.SignalR;

public class DashboardHub : Hub
{
    public async Task SendDashboardUpdate(string message)
    {
        await Clients.All.SendAsync("ReceiveDashboardUpdate", message);
    }
}

Register SignalR in your Program.cs:

builder.Services.AddSignalR();
app.MapHub<DashboardHub>("/dashboardHub");

Step 3: Detect Data Changes in ASP.NET Core

Use a BackgroundService that periodically checks SQL change tables.

public class ChangeTrackingService : BackgroundService
{
    private readonly IHubContext<DashboardHub> _hubContext;
    private readonly IConfiguration _config;

    public ChangeTrackingService(IHubContext<DashboardHub> hubContext, IConfiguration config)
    {
        _hubContext = hubContext;
        _config = config;
    }

    protected override async Task ExecuteAsync(CancellationToken stoppingToken)
    {
        while (!stoppingToken.IsCancellationRequested)
        {
            var changes = await GetChangedRowsAsync();
            if (changes.Any())
            {
                await _hubContext.Clients.All.SendAsync("ReceiveDashboardUpdate", changes);
            }
            await Task.Delay(5000, stoppingToken);
        }
    }

    private async Task<List<object>> GetChangedRowsAsync()
    {
        // SQL query using CHANGE_TRACKING_CURRENT_VERSION and CHANGETABLE()
        return new List<object>(); // Replace with actual logic
    }
}

Step 4: Connect Angular App with SignalR

Install the SignalR client:

npm install @microsoft/signalr

In Angular:

import { Injectable, signal } from '@angular/core';
import * as signalR from '@microsoft/signalr';

@Injectable({ providedIn: 'root' })
export class DashboardSignalService {
  dashboardData = signal<any[]>([]);

  private hubConnection!: signalR.HubConnection;

  startConnection() {
    this.hubConnection = new signalR.HubConnectionBuilder()
      .withUrl('https://yourapi.com/dashboardHub')
      .build();

    this.hubConnection.start().then(() => console.log('Connected to SignalR'));

    this.hubConnection.on('ReceiveDashboardUpdate', (data) => {
      this.dashboardData.set(data);
    });
  }
}

Step 5: Create the Live Dashboard Component

@Component({
  selector: 'app-live-dashboard',
  template: `
    <div *ngFor="let sale of dashboardSignalService.dashboardData()">
      <div>{{ sale.itemName }} - {{ sale.amount | currency }}</div>
    </div>
  `
})
export class LiveDashboardComponent {
  constructor(public dashboardSignalService: DashboardSignalService) {}
}

Now the dashboard UI will auto-refresh whenever SQL data changes.

Performance & Scalability Tips

  • Use CHANGE_TRACKING_CURRENT_VERSION() to avoid missing updates.

  • Batch updates in SignalR to avoid flooding clients.

  • Use Angular Signals wisely — store minimal state, not full datasets.

  • Use WebSocket transport mode in SignalR for low latency.

  • Implement role-based filters to broadcast only relevant updates.

Advantages of This Architecture

  • ✅ Instant updates: Users always see live data.

  • ✅ Lightweight: No need for Hangfire or heavy polling.

  • ✅ Modern: Uses reactive Angular Signals and native SQL features.

  • ✅ Maintainable: Clear separation of concerns (UI, API, DB).

Conclusion

With Angular Signals, ASP.NET Core SignalR, and SQL Server Change Tracking, you can build real-time dashboards that stay perfectly in sync with your data — efficiently and elegantly.

This approach is production-ready, scalable, and ideal for ERP, CRM, or analytics dashboards.

Membership not found