Angular Gantt

Angular UI Components

Show Demo List

15 jqxGantt demos with source code

Default Functionality – The Default Functionality demo of the Angular Gantt.

Nested project – The Nested project demo of the Angular Gantt.

Nonworking hours – Description: nonworkingHours determine the non working Hours of the day. Similar to nonworkingDays they are also ignored in the task start/end date calculations. Also colored in gray. Drag and Drop a task inside the timeline to see how the Task Bar changes according to the new added/removed slack time.

Resources Timeline view

Resources view – Description Multiple tasks with resources assigned to some of them are displayed inside the GanttChart. Those that do not have tasks assigned have a question mark. Projects are not allowed to have resources assigned to them, thanks to the disableResources property. A formatFunction is applied to the "Assignee" column which displays tasks with multiple resources assigned in a different way. The Resource Panel is hidden in order to see only the Tasks.

Resources Timeline mode Histogram

Sorting – Gantt Chart can be sorted by columns by clicking on the header of the desired column. The first click on the header will sort the Tasks in 'ascending' order. Second click will sort them in 'descending' and the third will remove the sorting.

Task baseline – The Task baseline demo of the Angular Gantt.

Task columns – The Task columns demo of the Angular Gantt.

Task connections

Task deadline

Task filtering – Filter the tasks inside the GanttChart component. Two types of filtering are available: default and advanced( via the filterRow). The default filtering mode filters all columns based on their cell values. Cell value might not be the same as the cell's actual content that appear inside the Table. The cell value is determined by the column settings defined in the taskColumn property. For example, the Priority column uses a formatFunction to display the priority labels ('Low', 'Medium', 'High') instead of the actual numeric values that represent them. The filtering is applied on the numeric values of the column since they represent the actual priority of the task.

Task Indicators

Views – The Angular Gantt widget allows you to display data in Year, Month, Week and Day views.

jqxGantt API

jqxGantt has 89 properties, 27 events and 50 methods, all in the API reference. Its main members, those its demos use first:

dateStart (property) – Determines a specific starting date for the Timeline.

dateEnd (property) – Determines a specific end date for the Timeline.

tasks (property) – A getter that returns a flat structure as an array of all tasks inside the element.

taskColumns (property) – Determines the columns that will be visible in the Task Tree.

view (property) – Determines the viewing date range of the timeline.

durationUnit (property) – Determines in what unit is task duration property measured.

treeSize (property) – Determines the size(width) of the task table.

resources (property) – A getter that returns a flat structure as an array of all resources inside the element.

resourceColumns (property) – Determines the columns that will be visible in the Resource Tree.

treeMin (property) – Determines the min width of the task table.

Angular UI Components (Angular 16–22 supported)

Data Grids and Tables

Charts and Visualization

Scheduling and Planning

AI and Collaboration

Editors and Inputs

Lists and Selection

Navigation and Menus

Layout and Containers

Popups and Feedback

Data and Utilities

Introduction

About jqxGantt for Angular

15 jqxGantt demos with source code

jqxGantt API

Learn more