Angular

The fastest Angular Gantt chart

The Bryntum Angular Gantt chart is a super-fast and fully customizable Gantt component for your Angular application.

Install Apache Configure Ports Configure Firewall Configure Ports Availability

Clear and concise documentation

Gantt chart for Angular code example

 

The following code example shows the setup for an Angular Gantt chart project with task dependencies in app.component.ts.

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})

export class AppComponent {
    startDate = new Date(2022, 0, 1);
    tasks = [
        {
            id: 1,
            name: 'Write docs',
            expanded: true,
            children: [
                { id : 6, name : 'Proof-read docs', startDate : '2022-01-02', endDate : '2022-01-09' },
                { id : 3, name : 'Release docs', startDate : '2022-01-09', endDate : '2022-01-10' }
            ]
        }
    ];

    dependencies = [
        { fromTask : 6, toTask : 3 }
    ];

    ganttConfig = ganttConfig;
    projectConfig = projectConfig;

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

Task constraints of the Angular Gantt chart

Easily add task constraints in your Bryntum Angular Gantt chart for granular control over how tasks are scheduled:

  • Start no earlier than
  • Start no later than
  • Finish no earlier than
  • Finish no later than
  • Must start on
  • Must finish on

Dynamic rendering with Angular template syntax 

Render custom elements using Angular components in the Bryntum Angular Gantt chart. Easily use Angular HTML-based template syntax in components and keep rendering logic and markup in sync.


columns: [
  {
    text: 'Angular Component',
    field: 'color',
    htmlEncode: false, 
    renderer(data: any) {
      const { record, value } = data;
      // Use Custom Element with attributes
      return `<color-renderer value="${value.toLowerCase()}" name="${record.name}"></color-renderer>`;
    }
  }
]

Customizable Task Editor for for the Angular Gantt chart component

The Bryntum Angular Gantt has a built-in Task Editor you can easily extend and customize. Change the visible fields and add your own custom tabs.

Best-in-class Angular Gantt scheduling engine

The Bryntum Angular Gantt engine provides asynchronous scheduling of any number of tasks by taking task dependencies, constraints, and scheduling modes into account. The Bryntum Angular Gantt engine is implemented independently from the DOM and can also be run on a node server.

Animated redraws

When you move a task, the result is animated into place so you can easily follow how an update affects other tasks.

Bryntum Angular Gantt chart features

The Bryntum Angular Gantt chart includes features like the task editor, configurable tooltips, and resource assignment editor.

The Bryntum documentation describes all the technical details of the Bryntum Angular Gantt chart.

Render custom HTML

Render custom HTML in the Bryntum Angular Gantt taskbar element for an enhanced, elegant interface. Include a customization menu to toggle UI settings during runtime and personalize the user experience.

Try it yourself!

Trusted by the world’s leading companies

Ready to get started?