Skip to content

SEO-203521-Angular-Gantt-Chart-External-Linking #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 40 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,49 @@
# Getting Started with the Angular Gantt Chart Component

A quick-start Angular project that shows how to add and work with the Angular Gantt Chart component of Syncfusion using the Angular CLI toolchain. This project contains simple code customization, as well as some important features like setting timeline views, column customization and task dependencies.

Documentation: https://ej2.syncfusion.com/angular/documentation/gantt/getting-started/

Online examples: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/gantt/default
The [Angular Gantt Chart](https://www.syncfusion.com/angular-components/angular-gantt-chart?utm_source=github&utm_medium=listing&utm_campaign=angular-gantt-chart-github-samples) is a project planning and management tool used to display and manage hierarchical tasks with timeline details. A quick-start Angular project that shows how to add and work with the Angular Gantt Chart component of Syncfusion using the Angular CLI toolchain. This project contains simple code customization, as well as some important features like setting timeline views, column customization and task dependencies.

## Project prerequisites

Make sure that you have the latest versions of NodeJS and Visual Studio Code in your machine before starting to work on this project.

### How to run this application?

To run this application, you need to clone the `getting-started-with-the-angular-gantt-chart-component` repository and then open it in Visual Studio Code. Now, simply install all the necessary react packages into your current project using the `npm install` command and run your project using the `ng serve` command.
To run this application, you need to clone the `getting-started-with-the-angular-gantt-chart-component` repository and then open it in Visual Studio Code. Now, simply install all the necessary react packages into your current project using the `npm install` command and run your project using the `ng serve` command.

## Features and Benefits

### Timeline
The Angular Gantt Chart supports different configurable timeline views such as [hour](https://ej2.syncfusion.com/angular/documentation/gantt/timeline/timeline#hour-timeline-mode), [day](https://ej2.syncfusion.com/angular/documentation/gantt/timeline/timeline#day-timeline-mode), [week](https://ej2.syncfusion.com/angular/documentation/gantt/timeline/timeline#week-timeline-mode), [month](https://ej2.syncfusion.com/angular/documentation/gantt/timeline/timeline#month-timeline-mode), and [year](https://ej2.syncfusion.com/angular/documentation/gantt/timeline/timeline#year-timeline-mode).

### Resource view
Visualize the list of tasks assigned to each resource in a hierarchical manner. Multiple tasks assigned to each resource can be visualized in a row when the records are in a collapsed state.

### Virtual scrolling
[Virtual scroll](https://ej2.syncfusion.com/angular/documentation/gantt/virtual-scroll) in Angular Gantt Chart allows you to load large amounts of data without performance degradation. In row virtualization mode, all tasks are fetched initially from the datasource and rendered in the DOM within a compact viewport area.

### Filtering
Data across all columns can be filtered using the filter option in each column and search option in the toolbar. It supports two filter types, [Excel-like filter](https://ej2.syncfusion.com/angular/documentation/gantt/filtering/excel-like-filter) and [menu filter](https://ej2.syncfusion.com/angular/documentation/gantt/filtering/filter-menu).

### Editing
The Gantt Chart provides full support to create, read, update, and delete (CRUD) operations. In addition to built-in editor controls to edit a particular column value, using template support users can create custom editor controls that suit their application needs.

## Related Links

[Learn more about Angular Gantt Chart](https://www.syncfusion.com/angular-components/angular-gantt-chart?utm_source=github&utm_medium=listing&utm_campaign=angular-gantt-chart-github-samples)
[Download Free Trial](https://www.syncfusion.com/downloads/angular?utm_source=github&utm_medium=listing&utm_campaign=angular-gantt-chart-github-samples)
[Pricing](https://www.syncfusion.com/sales/teamlicense?utm_source=github&utm_medium=listing&utm_campaign=angular-gantt-chart-github-samples)
[Documentation](https://ej2.syncfusion.com/documentation/maps/getting-started?utm_source=github&utm_medium=listing&utm_campaign=angular-gantt-chart-github-samples)
[View Demos](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/gantt/default?utm_source=github&utm_medium=listing&utm_campaign=angular-gantt-chart-github-samples)
[Community Forums](https://www.syncfusion.com/forums/angular-js2?control=ganttchart?utm_source=github&utm_medium=listing&utm_campaign=angular-gantt-chart-github-samples)
[Suggest a Feature](https://www.syncfusion.com/feedback/angular?control=gantt-chart?utm_source=github&utm_medium=listing&utm_campaign=angular-gantt-chart-github-samples)

## About Syncfusion Angular Components
Syncfusion's [Angular UI controls](https://www.syncfusion.com/angular-components?utm_source=github&utm_medium=listing&utm_campaign=angular-gantt-chart-github-samples) library is the only suite that you will ever need to build an application since it contains over 90 high-performance, lightweight, modular, and responsive UI controls in a single package. In addition to Gantt Chart, we provide popular Angular Controls such as [DataGrid](https://www.syncfusion.com/angular-components/angular-grid?utm_source=github&utm_medium=listing&utm_campaign=angular-gantt-chart-github-samples), [Charts](https://www.syncfusion.com/angular-components/angular-charts?utm_source=github&utm_medium=listing&utm_campaign=angular-gantt-chart-github-samples), [Scheduler](https://www.syncfusion.com/angular-components/angular-scheduler?utm_source=github&utm_medium=listing&utm_campaign=angular-gantt-chart-github-samples), [Diagram](https://www.syncfusion.com/angular-components/angular-diagram?utm_source=github&utm_medium=listing&utm_campaign=angular-gantt-chart-github-samples), and [Word Processor](https://www.syncfusion.com/angular-components/angular-word-processor?utm_source=github&utm_medium=listing&utm_campaign=angular-gantt-chart-github-samples).

## About Syncfusion

Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 29,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today we provide 1900+ controls and frameworks for web ([Blazor](https://www.syncfusion.com/blazor-components?utm_source=github&utm_medium=listing&utm_campaign=angular-gantt-chart-github-samples), [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-gantt-chart-github-samples), [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-gantt-chart-github-samples), [ASP.NET WebForms](https://www.syncfusion.com/jquery/aspnet-web-forms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-gantt-chart-github-samples), [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-gantt-chart-github-samples), [Angular](https://www.syncfusion.com/angular-components?utm_source=github&utm_medium=listing&utm_campaign=angular-gantt-chart-github-samples), [React](https://www.syncfusion.com/react-components?utm_source=github&utm_medium=listing&utm_campaign=angular-gantt-chart-github-samples), [Vue](https://www.syncfusion.com/vue-components?utm_source=github&utm_medium=listing&utm_campaign=angular-gantt-chart-github-samples), and [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=angular-gantt-chart-github-samples)), mobile ([Xamarin](https://www.syncfusion.com/xamarin-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-gantt-chart-github-samples), [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=angular-gantt-chart-github-samples), [UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-gantt-chart-github-samples) and [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-gantt-chart-github-samples)), and desktop development ([WinForms](https://www.syncfusion.com/winforms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-gantt-chart-github-samples), [WPF](https://www.syncfusion.com/wpf-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-gantt-chart-github-samples), [WinUI](https://www.syncfusion.com/winui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-gantt-chart-github-samples), [UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-gantt-chart-github-samples), [Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=angular-gantt-chart-github-samples), and [.NET MAUI](https://www.syncfusion.com/maui-controls?utm_source=github&utm_medium=listing&utm_campaign=angular-gantt-chart-github-samples)). We provide ready-to deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.

<hr style="height:0.3px;border:none;color:lightgrey;background-color:lightgrey;" />