We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to get started easily with Syncfusion angular 7 Gantt Chart?

Platform: JavaScript - EJ 2 |
Control: Gantt Chart |
Published Date: May 16, 2019 |
Last Revised Date: August 28, 2020

The Essential JS2 Angular Gantt control is designed to visualize and edit the project schedule and track the project progress. It helps to organize and schedule the projects and you can update the project schedule through interactions like editing, dragging and resizing. In this knowledge base we are going to provide details about create and integrate an Angular 7 Gantt chart Application with a minimal code configuration.

 

Prerequisites

Before start, we need following items to create Angular Gantt in Angular 7 application

Installation and application creation

  • Install Angular cli 7 using following command.
    npm install -g @angular/cli@7.0.5
    

 

Note:

If you would like to follow and run the application in Angular 6 or Angular 5 or Angular 4, you need to replace the CLI command version number with corresponding angular version number.

 

npm install -g @angular/cli@<CLI VERSION>

 

  • Create an Angular 7 application using Angular cli.
    ng new gantt-angular7
    cd gantt-angular7
    
  • Install the ej2-angular-gantt package through the npm install command.
    npm install @syncfusion/ej2-angular-gantt --save 
    
  • Serve the Angular 7 application using following command
    ng serve --open
    

Listen the application in localhost:4200. Your application will serve in browser. Refer the below example screenshot for Angular 7 version.

 

Gantt-angular 7 application in browser.

Adding Angular 7 Gantt chart

You can add the Angular 7 Gantt Component by using `ejs-gantt` directive and the attributes used within this tag allows you to define other Gantt functionalities.

  • Import the GanttModule in app.module.ts file from the ej2-angular-gantt package.
  • The next step in Angular Gantt Chart creation is to import and inject the other required modules within providers section of app.module.ts

[app.module.ts]

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { AppComponent } from './app.component';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GanttModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { } 
  • You should refer the CSS file for Angular Gantt in styles.css     
    @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
    @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
    @import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
    @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
    @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
    @import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
    @import '../node_modules/@syncfusion/ej2-layouts/styles/material.css';
    @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
    @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
    @import '../node_modules/@syncfusion/ej2-richtexteditor/styles/material.css';
    @import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
    @import '../node_modules/@syncfusion/ej2-treegrid/styles/material.css';
    @import '../node_modules/@syncfusion/ej2-gantt/styles/material.css';
    
  • Add the Angular Gantt component in app.component.html.
    <ejs-gantt></ejs-gantt>
    
  • Now, define the row data for this Gantt in app.component.ts. Here, the JSON data is used for the Gantt.
    export class AppComponent implements OnInit {
        public data: Object[]; 
        public taskfield: Object;
        ngOnInit() {
            this.data = [{
                TaskID: 1,
                TaskName: 'Product Concept',
                StartDate: new Date('04/02/2019'),
                EndDate: new Date('04/21/2019'),
                subtasks: [{
                    TaskID: 2,
                    TaskName: 'Defining the product and its usage',
                    StartDate: new Date('04/02/2019'),
                    Duration: 5,
                    Progress: 30
                },
     
                ]
            }, ];
            this.taskfield = {
                id: 'TaskID',
                name: 'TaskName',
                startDate: 'StartDate',
                endDate: 'EndDate',
                child: 'subtasks'
            };
        }
    }
    
  • After defining the data source for Gantt, define the data source and task fields in app.component.html file.
    <ejs-gantt id="GanttSample" 
      [dataSource]="data" 
      height= "450px"
      width="800px"
      [taskFields]= "taskfield">
    </ejs-gantt>
    
  • Now serve the application using following command.
     ng serve --open
    

Once all the files are compiled successfully. It will serve the site at localhost:4200

The following screenshot illustrates this.

Gantt initial rendering

Enabling features

Till now we have studied how to integrate Gantt control in Angular 7 application. This section describes how to inject Gantt services and enable its features. Before enable Gantt features, we need to define their services in app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { GanttModule, ResizeService, SortService, FilterService, SelectionService, ReorderService,
  EditService, DayMarkersService, ToolbarService } from '@syncfusion/ej2-angular-gantt';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GanttModule
  ],
  providers: [ ResizeService, SortService, FilterService, SelectionService, ReorderService,
  EditService, DayMarkersService, ToolbarService],
  bootstrap: [AppComponent]
})
export class AppModule { } 

 

Filtering

By declaring FilterService in app.module.ts, you can use filtering functionalities in Gantt. To enable filter, we need to define allowFiltering as true.

<ejs-gantt id='GanttSample' 
  [dataSource]='data' 
  height= '450px' 
  allowFiltering = 'true'
  [taskFields]= 'taskfield'>
</ejs-gantt>

 

After enabling the, filter menu UI will be obtained as follows.

Gantt Filter

Event Markers

By declaring DayMarkersService in app.module.ts, You can mark special events in project. As this is an object array you can mark more than one events in the Gantt chart.

<ejs-gantt id='GanttSample' 
  [dataSource]='data' 
  height= '450px' 
  allowFiltering = 'true'
  [eventMarkers] = 'eventMarkers'
  [taskFields]= 'taskfield'>
</ejs-gantt>

 

TS

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    public data: Object[];
    public eventMarkers: any;
    ngOnInit() {
        this.eventMarkers = [{
            day: '04/04/2019',
            label: 'Research phase'
        }];
    }
}

After defining day markers. UI will be obtained as follows. 

Gantt event marker

Summary

In this GitHub repository, the application prepared from the above steps has been committed, and it is readily runnable. Also, you can check our Angular Gantt features from this page.

If you have any queries or require clarifications. Please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!

 

 

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile