<
Meet DHTMLX Gantt 8.0 with Improved Resource Management, Updated Auto Scheduling and Slack Calculation, New Design for Samples, and More
Angular

Fully-Fledged Angular Gantt Chart

Integrate a multifunctional and interactive Angular Gantt component into your project management app and let users manage tasks on the fly.

Try DHTMLX Angular Gantt Chart Live Demo

Open a demo on desktop
DHTMLX Gantt has already been used for managing thousands of projects worldwide.

How to Create Angular Gantt Chart

6 steps to start with DHTMLX Gantt in Angular:
1.
Create an Angular component for Gantt and import Gantt and its types.
2.
Specify the CSS selector and inline template to create Gantt on the page.
3.
Declare a private property for Gantt that will be used in the ngOnInit and ngOnDestroy methods.
4.
Create the Gantt instance in the ngOnInit method and add the Gantt configuration there.
5.
Attach the Gantt instance to the private property.
6.
Destroy the Gantt Instance in the ngOnDestroy method to clean up when Gantt is no longer needed.

Key Features of DHTMLX Angular Gantt Chart

PRO edition
Add-ons
Standard edition
Resource management
DHTMLX Gantt offers end-users the ability to assign multiple resources, e.g. staff and facilities, to projects and tasks. It also helps to adjust the assignments precisely by providing a range of load charts and histograms.
Critical path
The availability of the built-in critical path calculation allows users to highlight the minimum duration of an entire project and identify the key tasks. Besides, DHTMLX Gantt makes it possible to display the slack time and set the lag and lead times.
Auto scheduling
By utilizing the automatic scheduling functionality, end-users can streamline their task management process. If they change the duration of a particular task, all due dates are updated automatically with careful consideration of task dependencies.
Node.js server module
You can integrate DHTMLX Gantt with complex CRM or ERP systems externally using a Node.js server module. It enables real-time collaboration with people working in a shared timeline and clientless integration with on-the-fly calculations based on calendars and dynamic links.
PDF/PNG export module
We suggest using a standalone module that you can install locally to export Gantt charts to PDF and PNG formats securely with no need to share your data with our server. With this module, you can also convert Gantt projects to iCal and Excel formats.
MS Project and Primavera P6 module
DHTMLX Gantt allows working with MS Project and Primavera P6 files. For that, you have to deploy a standalone export module that serves to export and import Gantt data smoothly and securely to the most popular project management formats.
Drag and drop
DHTMLX Gantt supports various drag-and-drop operations you can control via API. Thus, for example, end-users can easily create new tasks, move several tasks within a timeline, and reorder columns in the grid with the help of drag and drop.
Inline editing
With the keyboard navigation mode, end-users can smoothly manage all tasks directly within the grid via inline editing. The use of keyboard shortcuts facilitates the creation and updating of project tasks and their relations.
Tooltips
DHTMLX Gantt allows attaching tooltips to its elements, including tasks, connectors, and milestones. You’re free to add custom information and fully personalize tooltips' appearance and behavior to meet your project requirements.

Why Use DHTMLX Angular Gantt Chart?

Simple initialization
Getting started with DHTMLX Gantt is easy for developers of any experience level. The component can be quickly initialized with a few lines of code and equipped with the desired features. Detailed guides, demos, and video tutorials are always available.
Full-featured out of the box
DHTMLX Gantt provides a rich feature set for building complete project management apps. It covers all the essential aspects, including resource management, scheduling techniques, and different task types. Moreover, it has a clean UI out of the box.
Fully customizable
Our Angular Gantt chart library provides an extensive API that offers you various options for changing its appearance. You can change Gantt layout with the help of numerous built-in skins, including a Material one, and fine-tune the look of separate items (links, tasks, grid, scale, lightbox, etc.).
Stable and high-performance
When working with a large number of tasks, rendering delays may cause inconvenience. DHTMLX Angular Gantt component shows advanced performance, allowing you to build sophisticated Gantt charts with thousands of tasks and easily navigate through them without any rendering lags.
Cross-browser and adaptable
Cross-browser support is essential for allowing your users to interact with Gantt charts without facing any rendering faults. DHTMLX Angular Gantt works in all modern web browsers (Chrome, Firefox, Microsoft Edge, Safari) and is compatible with any front-end and back-end technologies.
Get started for free
Download the DHTMLX Gantt trial version and evaluate it free of charge for 30 days benefiting from the official technical support of our team.

What Customers Say

It's stable. It's easy to set up, even if you don’t have too much development experience. It’s highly customizable. It's full of features out of the box (and if something missing, you can write your own addon to cover missing functionality). It's beautiful out of the box, which is not always the case for similar components. Workload functionality is included, which is not the case for such components.
Dmitry (Dan) Dudin
CEO at GanttPRO
The API is extremely flexible, well documented and easy to understand if you need to look at underlying source code. The support has been responsive and high quality. We would absolutely recommend using DHTMLX and are even considering using some other products that they offer based on our experience so far.
Hive Team
Team productivity platform
For Splitvice, dhtmlxGantt fits with what we need. It's a stand-alone component, without an extra run-time fee. It's flexible and highly customizable. We get good support when we need it, but most of our questions are found right in the knowledge database.
Splitvice Team
Portfolio and project management tool
We were looking for a project management plugin to help reduce our time to market and development costs. That is why we are using DHTMLX Gantt. I tested a free version of your Gantt product and I was satisfied with the API provided with the plugin. Your product fitted my needs and it was easy to integrate it into my application.
Thomas Meghe
senior developer at the French company Echo on
Documentation
Browse documentation
DHTMLX documentation includes API references along with detailed technical guides and tutorials that help you to quickly initialize, configure, and customize the Gantt library.
Samples
View online samples
We're constantly upgrading DHTMLX Gantt online samples where you can explore the Gantt chart features, play around with the code, preview, and share your results with your team or our tech support.
Free trial
Download a 30-day free trial
To make sure the DHTMLX Gantt library matches your requirements, you can download a free 30-day trial. It’s an opportunity to test it extensively and benefit from official technical support.
Forum
Access our community forum
In the forum, you’ll find a lot of shared knowledge along with answers from our tech specialists about how to work with Gantt in Angular and other technologies. The access is entirely free.
Official tech support
Learn about DHTMLX support
The DHTMLX team supports all their users. You can explore the levels of support we provide for trial users and owners of proprietary and open-source licenses.
Integrations
Integrate Gantt with anything
Apart from the Angular framework, DHTMLX Gantt can be integrated with React, Vue JS, Salesforce, ASP.Net, Node.js, and any other technology you need.

DHTMLX Gantt Licensing

Gantt
Save on bundles
Commercial Enterprise Ultimate
License Terms
Commercial
Enterprise
Ultimate
Developers
Commercial
5
Enterprise
20
Ultimate
Projects
Commercial
1
Enterprise
5
Ultimate
Use in SaaS (unlimited end-users)
Commercial
Enterprise
Ultimate
Use in Salesforce
Commercial
Enterprise
Ultimate
Perpetual distribution rights
Commercial
Enterprise
Ultimate
Support Plan
Commercial
Premium Support
Enterprise
Premium Support
Ultimate
Ultimate Support
Time Period
Commercial
1 year
Enterprise
1 year
Ultimate
1 year
Updates
Commercial
Major, minor, and maintenance updates
Enterprise
Major, minor, and maintenance updates
Ultimate
Major, minor, and maintenance updates
Priority queue for bug fixing
Support requests
Commercial
30
Enterprise
50
Ultimate
Response Time
Commercial
48h
Enterprise
48h
Ultimate
24h
Personal account Manager
Commercial
Enterprise
Ultimate
Functionality
Commercial
Professional
Enterprise
Professional
Ultimate
Professional
16 PRO features
Commercial
Enterprise
Ultimate
Several Gantt charts on 1 page ? This feature enables creating and destroying instances of Gantt, what is especially common for Angular, React, and other frameworks.
Commercial
Enterprise
Ultimate
Online export to PDF/PNG without watermark
Commercial
Free for 1 year
Enterprise
Free for 1 year
Ultimate
Free for 3 years
Free local PDF/PNG export module
Commercial
Enterprise
Ultimate
Free local module for MS Project export/import
Commercial
Enterprise
Ultimate
Free Node.js Gantt server module
Commercial
Enterprise
Ultimate
Get a 70% Discount on DHTMLX Gantt for Your Startup
One-year license for DHTMLX JavaScript Gantt chart to help you cut your time-to-market and deliver top-notch software solutions.