Real-Time Angular Gantt Chart with SignalR: Multi-User Project Sync Without Refresh

TLDR: Concurrency issues don’t break your Gantt chart UI; they break trust in the data. The moment multiple users start editing, timelines drift, updates get missed, and teams fall back to manual coordination. This approach changes that. By integrating SignalR into your Angular Gantt Chart, wiring a lightweight backend hub, real-time client listeners, and event-driven updates, you turn a static timeline into a live, shared system. No polling, no refreshes, no guesswork; just instant updates and a consistent view for every user, exactly when it matters.

In most project management tools, things start breaking the moment multiple users start editing at the same time.

• One person updates a task.
• Another modifies dependency.
• Someone else shifts a timeline.

Before long, everyone looks at a slightly different version of the same data.

A Gantt Chart helps organize all of this; it visualizes dependencies, timelines, and resources clearly. But by default, it’s still just a local snapshot. Once multiple users are involved, keeping everyone in sync becomes the real problem.

This is where real-time updates change the behavior completely.

Instead of relying on refreshes or polling, SignalR keeps a persistent connection and pushes updates instantly to all connected clients.

The result is simple: everyone sees the same timeline, in real time, without second-guessing whether their view is up to date.

In this guide, we’ll walk you through integrating SignalR into the Syncfusion^® Angular Gantt Chart setup to make that happen.

What you gain: a timeline that stays in sync automatically

Once real-time updates are in place, the Gantt Chart behaves more like a shared system than a static UI:

• Immediate updates: Changes made by one user appear for everyone instantly.
• No refresh cycles: The UI stays current without manual intervention.
• Event-driven behavior: Updates are pushed only when something changes.
• Less coordination overhead: Everyone stays aligned without follow-ups.

Where this approach actually matters

Integrating SignalR with the Angular Gantt Chart is most useful when multiple roles interact with the same timeline.

For example, in a sprint planning tool:

• A product owner adjusts deadlines.
• Developers update tasks and dependencies.
• QA engineer modifies testing windows.

Without real-time sync, updates get missed or overwritten, and teams fall back to messaging each other for confirmation.

With SignalR in place, the Gantt Chart behaves like a shared workspace; updates are visible immediately, and everyone works off the same state.

You’ll see similar benefits in tools like:

• Construction scheduling,
• Resource planning dashboards, or
• Internal workflow trackers,

….. and anywhere multiple users actively edit the timeline.

What you need to get started

The setup is fairly lightweight:

• Visual Studio or VS Code
• Angular application
• .NET 8+ backend
• SignalR
• Node.js and Angular CLI (ng new gantt-signalr)
• A valid Syncfusion license key

Setting up the backend: .NET Core with SignalR

Before jumping onto the Angular side, it’s worth getting the backend ready. This is where the real-time behavior actually lives. Instead of thinking of it as just another API, think of it more like an event relay that pushes updates whenever something changes.

If you’ve tried solving multi-user sync with polling before, you already know how quickly it becomes inefficient. SignalR avoids that entirely by maintaining a connection and pushing updates only when needed.

#1: Getting a basic API in place

Start with a standard ASP.NET Core Web API project. Nothing unusual here.

If you already have a backend serving your Gantt data, you’re in a good place; you don’t need to rebuild anything. Just add SignalR on top of what you already have.

#2: Adding the SignalR hub (your real-time bridge)

Once the project is ready, the next step is adding a hub.

Create a folder called Hubs, and inside that add a file named ChatHub.cs. This hub defines the SendMessage method that broadcasts messages to all connected clients.

//Hubs/ChatHub.cs

using Microsoft.AspNetCore.SignalR;

namespace GanttSignalRBackend.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", message);
        }
    }
}

At this point, you’re not doing anything complex; you’re just broadcasting a message to every connected client. That’s enough to build your sync loop.

#3: Wiring it up so Angular can talk to it

With the hub in place, the next step is to register SignalR services and enable CORS (Cross-Origin Resource Sharing) and make sure your frontend can actually connect to it.

Program.cs

using signalR.Hubs;

builder.Services.AddSignalR(); // Add SignalR services

builder.Services.AddCors(options =>
{
    options.AddDefaultPolicy(policy =>
    {
        policy.WithOrigins("https://localhost:7297") // Angular dev server
              .AllowAnyHeader()
              .AllowAnyMethod()
              .AllowCredentials();
    });
});

The CORS setup is important during development, since our Angular app typically runs on a different port. Without it, the connection won’t go through.

#4: Run the project

At this point, you can just start the backend using the following command:

dotnet run

It should start on:

https://localhost:7297(or a similar port).

Now, the backend is ready! It can accept connections and push updates to any client that’s listening.

Setting up the frontend: Angular with Syncfusion Gantt Chart

With the backend ready to push updates, the front-end is where things start to feel different.

Up until now, your Gantt chart has probably behaved like a snapshot; render data once, and that’s it. Now, you’re going to make it react to changes happening elsewhere.

You don’t need a complex setup to get there. A regular Angular app with a working Gantt chart is enough.

#1: Start with your usual Angular setup

Create your Angular project and set up the Gantt Chart however you normally would. Nothing has changed here yet.

#2: Add the SignalR client package

To handle real-time updates, we need the SignalR client:

npm install @microsoft/signalr –save

Once that’s installed, Angular is ready to connect to the backend and start listening for updates.

#3: Register the Syncfusion license key

Before moving further, make sure your license key is registered in your component:

app.component.ts

import { registerLicense } from '@syncfusion/ej2-base';
registerLicense('YOUR_SYNC FUSION_LICENSE_KEY');

After that, your Gantt Chart setup remains exactly as usual.

Read the full blog post on the Syncfusion Website