Angular Gantt Chart - Tutorial Videos

Learn how easily you can create and configure the Syncfusion Angular Gantt Chart component using the Angular CLI tool and Syncfusion ej2-angular-gantt package. This video also explains how to configure a few of the control's basic features like setting timeline views and task dependencies.

Download Example: Getting Started with the Angular Gantt Chart

Learn how easily you can bind local and remote hierarchical data to the Syncfusion Angular Gantt Chart component. In this video, remote data is bound by assigning service data as an instance of the DataManager to the dataSource property. The Data Manager acts as an interface between the service endpoint and the Gantt Chart component. This video also explains how to bind self-referential data to the Gantt Chart.

Download Example: Bind Data to the Angular Gantt Chart

Learn how to enable editing in the Angular Gantt Chart component of Syncfusion. Also see how to perform cell, dialog, taskbar, and dependency editing in Gantt charts. Gantt component features are segregated into individual feature-wise modules. To use editing feature, inject the Edit module. To use a selection feature, inject the Selection module.

Download Example: Different Editing Modes in Angular Gantt Chart

Learn how easily you can customize the column headers and data in the Angular Gantt Chart component of Syncfusion using templates. In this video, the custom toolbar buttons Quick Filter and Clear Filter are rendered, along with predefined toolbar items Expand All and Collapse All.

Download Example: Customize Columns Using Templates in Angular Gantt Chart

Learn how easily you can export a Syncfusion Gantt Chart to PDF and Excel in an Angular application. This video also explains how to customize file name, footer, theme, predecessor in the documents and export them.

Download Example: Exporting Angular Gantt Chart to PDF

Learn how easily you can allocate one or more resources to tasks in the Angular Gantt Chart component of Syncfusion based on the task requirement. In this video, there is a set of predefined resources added in the application, and those IDs are assigned to the tasks. This video also explains how to view the list of tasks assigned to each resource hierarchically and enable multiple taskbars.

Download Example: Resource Allocation and Task Breakdown in Angular Gantt Chart

Learn how to perform selection in the Angular Gantt Chart component. This video shows how to enable or disable selection, its modes, types, and selection at initial rendering and programmatically on cells and rows. It also shows how to disable selection on a particular record and clear all the selections at runtime.

Download Example: How to Perform Selection in Angular Gantt Chart