Bryntum Gantt: Quick start guide for Angular integration

Using an AI coding assistant? Install the Bryntum MCP server to give it access to version-specific Bryntum documentation.

Try Angular demos

Bryntum Gantt ships with several demo Angular applications that showcase its functionality. Each demo has been tested and confirmed to be compatible with Node.js 20.

View online Angular demos Build and run Angular demos

Version requirements

Minimum supported:

Angular: 9.0.0 or higher
TypeScript: 3.6.0 or higher (for TypeScript application)
Vite 4.0.0 or higher (for application build with Vite)

Recommended:

Angular: 12.0.0 or higher
TypeScript: 4.0.0 or higher (for TypeScript application)
Vite 5.0.0 or higher (for application build with Vite)

Create Angular application

This quick start guide will show you how to integrate Bryntum Gantt into your Angular applications.

To illustrate the integration process, we'll build a simple application that looks like the image below.

Here's a breakdown of the process we'll follow:

Access the Bryntum npm registry
Create an Angular application
Install the Bryntum Gantt component
Add the component to the application
Apply styles
Run the application

Access to npm registry

You can try out Bryntum components for free using our public Bryntum trial packages. If you have a Bryntum license, please refer to our Npm Repository Guide to access the private Bryntum repository.

Create application

As with all the examples included in the distribution, we will use the Angular CLI to build Angular applications.

Install the Angular CLI with the following command:

npm install -g @angular/cli

Use the Angular CLI to create a basic application using Typescript:

ng new gantt-app --no-standalone --no-routing --ssr=false

You can replace gantt-app with your preferred application name.

Bryntum components render on the client side. We use --ssr=false to indicate that server-side rendering is not required.

You will be prompted to select a stylesheet format. We recommend choosing either CSS or SCSS. This guide covers both options.

Now move to your application folder:

cd gantt-app

Install the component

From your terminal, update project dependencies using the following commands:

Trial version Licensed version

npm install @bryntum/gantt@npm:@bryntum/gantt-trial@7.3.0 @bryntum/gantt-angular@7.3.0

npm install @bryntum/gantt@7.3.0 @bryntum/gantt-angular@7.3.0

If you're using the licensed Bryntum version, ensure that you have configured your npm properly to get access to the Bryntum packages. If not, refer to this guide.

Add the component to the application

Starting from Angular v20, file naming conventions have changed.

app.module.ts → app-module.ts
app.component.ts → app.ts
app.component.html → app.html
Class AppComponent → Class App

If you are on earlier version, please adjust the filenames and class names accordingly.

Edit the src/app/app-module.ts file and add the following import:

import { BryntumGanttModule } from "@bryntum/gantt-angular";

Next, add BryntumGanttModule to imports[] :

@NgModule({
    imports : [
        BryntumGanttModule
    ]
})

Next, edit the src/app/app.ts file and replace its content with the following:

import { Component, ViewChild } from '@angular/core';
import { BryntumGanttComponent, BryntumGanttProjectModelComponent } from '@bryntum/gantt-angular';
import { ganttProps, projectProps } from './app.config';

@Component({
    selector    : 'app-root',
    standalone  : false,
    templateUrl : './app.html',
    styleUrl    : './app.css',
})
export class App {

    ganttProps = ganttProps;
    projectProps = projectProps;

    @ViewChild('gantt') ganttComponent!: BryntumGanttComponent;
    @ViewChild('project') projectComponent!: BryntumGanttProjectModelComponent;
}

If you're using SCSS styling, replace './app.css' with './app.scss'.

Add component data

Create a public/data/data.json file for example data and add the following JSON data to it:

{
  "success": "true",
  "tasks": {
    "rows": [
      {
        "id": 1,
        "name": "Documentation Project",
        "expanded": true,
        "children": [
          {
            "id": 2,
            "name": "Preparation",
            "expanded": true,
            "children": [
              { "id": 6, "name": "Proof-read docs", "startDate": "2026-01-02", "endDate": "2026-01-09" },
              { "id": 3, "name": "Release docs",    "startDate": "2026-01-09", "endDate": "2026-01-10" }
            ]
          },
          {
            "id": 4,
            "name": "Development",
            "expanded": true,
            "children": [
              { "id": 7, "name": "Write API docs",  "startDate": "2026-01-05", "endDate": "2026-01-12" },
              { "id": 8, "name": "Write tutorials", "startDate": "2026-01-10", "endDate": "2026-01-16" },
              { "id": 9, "name": "Create examples", "startDate": "2026-01-12", "endDate": "2026-01-18" }
            ]
          },
          {
            "id": 5,
            "name": "Review & Release",
            "expanded": true,
            "children": [
              { "id": 10, "name": "Team review",     "startDate": "2026-01-18", "endDate": "2026-01-20" },
              { "id": 11, "name": "Final approval",  "startDate": "2026-01-20", "endDate": "2026-01-21" },
              { "id": 12, "name": "Public release",  "startDate": "2026-01-22", "endDate": "2026-01-22" }
            ]
          }
        ]
      }
    ]
  },
  "dependencies": {
    "rows": [
      { "fromTask": 6,  "toTask": 3  },
      { "fromTask": 7,  "toTask": 8  },
      { "fromTask": 8,  "toTask": 9  },
      { "fromTask": 9,  "toTask": 10 },
      { "fromTask": 10, "toTask": 11 },
      { "fromTask": 11, "toTask": 12 }
    ]
  }
}

The Bryntum Gantt uses multiple stores to manage its data, with each store dedicated to a specific type. For example, the Resource Store holds resource data such as people or assets. This separation keeps the data organized, synchronized, and easier to maintain.

To learn more, visit Project Data

Create a src/app/app.config.ts file with the following content:

import { BryntumGanttProps, BryntumGanttProjectModelProps } from '@bryntum/gantt-angular';

export const projectProps: BryntumGanttProjectModelProps = {
    // Automatically introduces a `startnoearlier` constraint for tasks that (a) have no predecessors,
    // (b) do not use constraints and (c) aren't `manuallyScheduled`
    autoSetConstraints : true,
    loadUrl            : 'data/data.json',
    autoLoad           : true
};
export const ganttProps: BryntumGanttProps = {
    columns : [
        { type : 'name', width : 200 }
    ],
    startDate : new Date(2026, 0, 1),
    endDate   : new Date(2026, 2, 1)
};

Note that the startDate and endDate configs passed to ganttProps denote the currently visible timespan.

By default, tasks without constraints, dependencies, or manual scheduling will automatically align with the project's start date. To disable this behavior, set autoSetConstraints to true in the ProjectModel configuration.

Finally, edit the src/app/app.html file and replace its content with the following:

<bryntum-gantt-project-model
    #project
    [loadUrl] = "projectProps.loadUrl!"
    [autoLoad] = "projectProps.autoLoad!"
    [autoSetConstraints] = "projectProps.autoSetConstraints!"
></bryntum-gantt-project-model>

<bryntum-gantt
    #gantt
    [startDate] = "ganttProps.startDate!"
    [columns] = "ganttProps.columns!"
    [endDate] = "ganttProps.endDate!"
    [project] = "project"
></bryntum-gantt>

Apply styles

Bryntum Gantt needs a theme and structural CSS to render correctly. If you are not replacing the icons used by the component, you will also need to include Font Awesome.

The following CSS files are provided in the Bryntum npm packages or in the /build folder of the distribution:

File	Contents
`gantt.css`	Structural CSS
`svalbard-light.css`	Svalbard Light theme
`svalbard-dark.css`	Svalbard Dark theme
`visby-light.css`	Visby Light theme
`visby-dark.css`	Visby Dark theme
`stockholm-light.css`	Stockholm Light theme
`stockholm-dark.css`	Stockholm Dark theme
`material3-light.css`	Material3 Light theme
`material3-dark.css`	Material3 Dark theme
`fluent2-light.css`	Fluent2 Light theme
`fluent2-dark.css`	Fluent2 Dark theme
`fontawesome/css/fontawesome.css`	Font Awesome Free base CSS
`fontawesome/css/solid.css`	Font Awesome Free solid icons

You need to reference the selected CSS file in your project.

Build folder npm

Copy the CSS file you're using, its paired .css.map file, and the font folder into a folder in your project, such as src/app.

We also recommend copying the .css.map file paired with the CSS file you selected.

Edit the src/app/app.ts file and add a reference to the CSS file location as follows:

styleUrls: [
  "./app.css",
  "./fontawesome/css/fontawesome.css",
  "./fontawesome/css/solid.css",
  "./gantt.css",
  "./material3-light.css",
];

Edit the src/styles.css or src/styles.scss file and add the following:

/* FontAwesome is used for icons */
@import "@bryntum/gantt/fontawesome/css/fontawesome.css";
@import "@bryntum/gantt/fontawesome/css/solid.css";
/* Structural CSS */
@import "@bryntum/gantt/gantt.css";
/* Bryntum theme of your choice */
@import "@bryntum/gantt/material3-light.css";

If you want to customize the default theme, override the relevant set of CSS variables after the import. Visit the section on creating a custom theme for more info.

The Bryntum components expect styling to be available globally, if you move the styling to app.css, it won't work, until you add the following lines of code to app.ts:

import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  standalone: false,
  styleUrl: './app.scss',
  encapsulation: ViewEncapsulation.None
})

Sizing the component

By default, the Bryntum Gantt component is configured to occupy 100% of the parent DOM element with a min-height of 10em.

To display the component at the appropriate size, you can, for example, set parent components to take up the full height of the screen.

CSS SCSS

In the src/styles.css file, add the following:

body,
html {
    margin         : 0;
    display        : flex;
    flex-direction : column;
    height         : 100vh;
    font-family    : sans-serif;
    font-size      : 14px;
}

app-root {
  flex: 1 1 100%;
}

In the src/styles.scss file, add the following:

body,
html {
    margin         : 0;
    display        : flex;
    flex-direction : column;
    height         : 100vh;
    font-family    : sans-serif;
    font-size      : 14px;
}

app-root {
  flex: 1 1 100%;
}

Various component-sizing solutions are available, so you can adapt the code above to suit your layout needs. For more information, see our sizing the component documentation.

Run the application

From your terminal, run:

ng serve

You can now see your application at http://localhost:4200.

Troubleshooting

If you run into issues while setting up your Bryntum Gantt component, refer to our troubleshooting guide for Bryntum Gantt with Angular.

What to do next?

Advanced integration with Angular

Visit our comprehensive Angular guide to learn more about integrating Bryntum Gantt with Angular and customizing your application.

Working with data in Bryntum Gantt

Bryntum components often use multiple data collections and entities.

For a detailed explanation of how these elements interact, see our guide to displaying data in Bryntum Gantt.