{"id":3963,"date":"2017-03-22T18:00:24","date_gmt":"2017-03-22T14:00:24","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=3963"},"modified":"2026-02-23T10:37:31","modified_gmt":"2026-02-23T07:37:31","slug":"dhtmlx-gantt-chart-usage-angularjs-2-framework","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-gantt-chart-usage-angularjs-2-framework\/","title":{"rendered":"DHTMLX Gantt Chart Usage with Angular Framework"},"content":{"rendered":"

Note:<\/strong> The information provided in this tutorial is outdated. We are working on a refreshed version, but in the meantime, please follow the relevant step-by-step guide<\/a> in the DHTMLX Gantt documentation. You can also check the DHTMLX Gantt with Angular demo<\/a> on GitHub.<\/em> <\/p>\n

The JavaScript ecosystem is regularly enriched with promising frameworks, but many web developers still prefer to use some time-proven options such as Angular. That’s why our plan for today is to give you a good starting point for using DHTMLX Gantt with the Angular framework.<\/p>\n

Now we’re going to implement an angular Gantt chart component for DHTMLX Gantt<\/a> (JavaScript Gantt Chart), add it into the small application and bind it to the RESTful API on a backend. We\u2019ll write this demo in TypeScript since it\u2019s a recommended way, although it also can be done in plain JavaScript or in ES6.<\/p>\n

Please mind that in this tutorial we won\u2019t cover server-side logic of data saving. Instead, we\u2019ll emulate the backend using the Angular in-memory-web-api tool<\/a>.<\/p>\n

You can download a complete Angular Gantt chart demo<\/a> from GitHub<\/strong>.<\/p>\n

Preparing App<\/h4>\n

To set up a development environment, we’ll use angular cli<\/strong>. If you don’t have angular cli<\/strong> you can get it with a package manager (npm install -g @angular\/cli) or check its documentation<\/a> for more details. To create an app skeleton, run the following command:<\/p>\n

ng new<\/span> gantt-<\/span>angular<\/div><\/div>\n

You\u2019ll be asked to pick a preset (add Angular routing or not, stylesheet type). Select the necessary options to configure the system to your needs.<\/p>\n

After the operation finishes, we can go to the app directory and run the application:<\/p>\n

cd gantt-<\/span>angular
\nng serve<\/div><\/div>\n

Now, if we open http:\/\/127.0.0.1:4200<\/strong> we should see the initial page. The ng serve<\/strong> command will watch the source file and, if necessary, will change and rebuild the app.<\/p>\n

\"DHTMLX<\/p>\n

Creating gantt chart component<\/h4>\n

First, we should get the DHTMLX Gantt chart code. Starting from Gantt v6.1, type definitions are bundled with the package, so we don\u2019t need to install them separately. Run the following command in order to add Gantt:<\/p>\n

npm install dhtmlx-gantt --save<\/div><\/div>\n

To add dhtmlxGantt to the Angular app we should create a new component. For this, run the following command:<\/p>\n

ng generate component gantt --skip-tests<\/div><\/div>\n

In the newly created “gantt.component.ts<\/strong>” file inside the “gantt<\/strong>” folder, we will add the next lines of code:<\/p>\n

import<\/span> {<\/span> Component,<\/span> ElementRef,<\/span> OnInit,<\/span> ViewChild,<\/span> ViewEncapsulation }<\/span> from '@angular\/core'<\/span>;<\/span>
\nimport<\/span> {<\/span> gantt }<\/span> from 'dhtmlx-gantt'<\/span>;<\/span>
\n 
\n@<\/span>Component(<\/span>{<\/span>
\n    encapsulation:<\/span> ViewEncapsulation.None<\/span>,<\/span>
\n    selector:<\/span> 'gantt'<\/span>,<\/span>
\n    styleUrls:<\/span> [<\/span>'.\/gantt.component.css'<\/span>]<\/span>,<\/span>
\n    template:<\/span> `<<\/span>div "gantt-chart"<\/span>><\/<\/span>div><\/span>`,<\/span>
\n}<\/span>)<\/span>
\nexport<\/span> class<\/span> GanttComponent implements<\/span> OnInit {<\/span>
\n    @<\/span>ViewChild(<\/span>'gantt_here'<\/span>,<\/span> {<\/span> static<\/span>:<\/span> true<\/span> }<\/span>)<\/span> ganttContainer!:<\/span> ElementRef;<\/span>
\n 
\n    ngOnInit(<\/span>)<\/span> {<\/span>
\n        gantt.init<\/span>(<\/span>this<\/span>.ganttContainer<\/span>.nativeElement<\/span>)<\/span>;<\/span>
\n    }<\/span>
\n}<\/span><\/div><\/div>\n

Here we\u2019ve defined our new component. It can be used with the “gantt” tag in html. When an element is loaded, it initializes gantt inside the container.<\/p>\n

Note that we\u2019ll declare gantt styles in the separate file named “gantt.component.css”. Default styles can look like the following:<\/p>\n

@<\/span>import<\/span> 'dhtmlx-gantt\/codebase\/dhtmlxgantt.css'<\/span>;<\/span>
\n.gantt<\/span>-<\/span>chart {<\/span>
\n    position:<\/span> relative;<\/span>
\n    width:<\/span> 100<\/span>%;<\/span>
\n    height:<\/span> 600px;<\/span>
\n}<\/span><\/div><\/div>\n

Next, we can put out a new component to the page. For this, open “app.component.html” and put the following code in there:<\/p>\n

<gantt><\/gantt><\/div><\/div>\n

Now if we open the page, we should see an empty gantt chart on it.
\n\"Empty<\/p>\n

Data Loading<\/h4>\n

To add data loading to our Angular gantt chart, we are going to add task and link services. But let us create models first.
\nFor creating the task<\/strong> model, run the following command:<\/p>\n

ng generate class models\/task --skip-tests<\/div><\/div>\n

In the newly created “task.ts<\/strong>” file inside the “models<\/strong>” folder, we will add the next lines of code:<\/p>\n

export<\/span> class<\/span> Task {<\/span>
\n    id!:<\/span> number;<\/span>
\n    start_date!:<\/span> string;<\/span>
\n    text!:<\/span> string;<\/span>
\n    progress!:<\/span> number;<\/span>
\n    duration!:<\/span> number;<\/span>
\n    parent!:<\/span> number;<\/span>
\n}<\/span><\/div><\/div>\n

Then, create the link<\/strong> model:<\/p>\n

ng generate class models\/link --skip-tests<\/div><\/div>\n

And add the following code to the “link.ts” file:<\/p>\n

export<\/span> class<\/span> Link {<\/span>
\n     id!:<\/span> number;<\/span>
\n    source!:<\/span> number;<\/span>
\n    target!:<\/span> number;<\/span>
\n    type!:<\/span> string;<\/span>
\n}<\/span><\/div><\/div>\n

Now, let\u2019s create our services. Service is a class responsible for doing a specific task. Angular services can be injected using the Dependency Injection mechanism and include data, function or some features necessary for your application. We\u2019re going to create a data service that we\u2019ll use to provide our gantt chart with tasks.<\/p>\n

For creating task<\/strong> service, run the following command:<\/p>\n

ng generate service services\/task --flat --skip-tests<\/div><\/div>\n

In the newly created “task.service.ts<\/strong>” file inside the “services<\/strong>” folder, it is required to add the next lines of code:<\/p>\n

import<\/span> {<\/span> Injectable }<\/span> from '@angular\/core'<\/span>;<\/span>
\nimport<\/span> {<\/span> Task }<\/span> from '..\/models\/task'<\/span>;<\/span>
\n 
\n@<\/span>Injectable(<\/span>)<\/span>
\nexport<\/span> class<\/span> TaskService {<\/span>
\n    get<\/span>(<\/span>)<\/span>:<\/span> Promise<<\/span>Task[<\/span>]<\/span>><\/span>{<\/span>
\n        return<\/span> Promise.resolve<\/span>(<\/span>[<\/span>
\n            {<\/span> id:<\/span> 1<\/span>,<\/span> text:<\/span> 'Task #1'<\/span>,<\/span> start_date:<\/span> '2023-04-15 00:00'<\/span>,<\/span> duration:<\/span> 3<\/span>,<\/span> progress:<\/span> 0.6<\/span>,<\/span> parent:<\/span> 0<\/span> }<\/span>,<\/span>
\n            {<\/span> id:<\/span> 2<\/span>,<\/span> text:<\/span> 'Task #2'<\/span>,<\/span> start_date:<\/span> '2023-04-18 00:00'<\/span>,<\/span> duration:<\/span> 3<\/span>,<\/span> progress:<\/span> 0.4<\/span>,<\/span> parent:<\/span> 0<\/span> }<\/span>
\n        ]<\/span>)<\/span>;<\/span>
\n    }<\/span>
\n}<\/span><\/div><\/div>\n

We\u2019ve added the @Injectable()<\/strong> decorator to our service. It marks a class as available to an injector for instantiation. We\u2019ll inject it into our component further.<\/p>\n

Currently, it returns the resolved promise with hard-coded data. But you can load data from the server side and return the promise. We will discuss it in more detail below.<\/p>\n

Then, create a link<\/strong> service:<\/p>\n

ng generate service services\/link --flat --skip-tests<\/div><\/div>\n

Add the following code to the “link.service.ts<\/strong>” file:<\/p>\n

import<\/span> {<\/span> Injectable }<\/span> from '@angular\/core'<\/span>;<\/span>
\nimport<\/span> {<\/span> Link }<\/span> from '..\/models\/link'<\/span>;<\/span>
\n 
\n@<\/span>Injectable(<\/span>)<\/span>
\nexport<\/span> class<\/span> LinkService {<\/span>
\n    get<\/span>(<\/span>)<\/span>:<\/span> Promise<<\/span>Link[<\/span>]<\/span>><\/span> {<\/span>
\n        return<\/span> Promise.resolve<\/span>(<\/span>[<\/span>
\n            {<\/span> id:<\/span> 1<\/span>,<\/span> source:<\/span> 1<\/span>,<\/span> target:<\/span> 2<\/span>,<\/span> type:<\/span> '0'<\/span> }<\/span>
\n        ]<\/span>)<\/span>;<\/span>
\n    }<\/span>
\n}<\/span><\/div><\/div>\n

This service is pretty much the same as a task service.<\/p>\n

Now open our “gantt.component.ts<\/strong>“. We should add TaskService and LinkService to our component. Firstly, add the necessary imports for our services:<\/p>\n

import<\/span> {<\/span>TaskService}<\/span> from "..\/services\/task.service"<\/span>;<\/span>
\nimport<\/span> {<\/span>LinkService}<\/span> from "..\/services\/link.service"<\/span>;<\/span><\/div><\/div>\n

Also, we should add the providers<\/strong> property to the @Component<\/strong> decorator argument:<\/p>\n

providers:<\/span> [<\/span>TaskService,<\/span> LinkService]<\/span><\/div><\/div>\n

It tells angular to create fresh instances of our services when it creates a new GanttComponent<\/strong>. So, our component can use those services to get tasks and links.<\/p>\n

Now, we can inject our services into the component. For this purpose, add the following constructor to GanttComponent<\/strong> class:<\/p>\n

constructor(<\/span>private taskService:<\/span> TaskService,<\/span> private linkService:<\/span> LinkService)<\/span> {<\/span> }<\/span><\/div><\/div>\n

Add the following code to the ngOnInit<\/strong> function.<\/p>\n

gantt.config<\/span>.date_format<\/span> =<\/span> '%Y-%m-%d %H:%i'<\/span>;<\/span>
\ngantt.init<\/span>(<\/span>this<\/span>.ganttContainer<\/span>.nativeElement<\/span>)<\/span>;<\/span>
\n 
\nPromise.all<\/span>(<\/span>[<\/span>this<\/span>.taskService<\/span>.get<\/span>(<\/span>)<\/span>,<\/span> this<\/span>.linkService<\/span>.get<\/span>(<\/span>)<\/span>]<\/span>)<\/span>
\n    .then<\/span>(<\/span> (<\/span>[<\/span>data,<\/span> links]<\/span>)<\/span> =><\/span> {<\/span>
\n        gantt.parse<\/span>(<\/span>{<\/span> data,<\/span> links }<\/span>)<\/span>;<\/span>
\n    }<\/span>)<\/span>;<\/span><\/div><\/div>\n

Here we’ve added the date_format<\/strong> config definition. It sets the data format for the loading tasks. Also here we call our services to get a function and then are waiting for a response to put data to gantt. gantt.parse<\/strong> accepts data objects of the following structure<\/a>.<\/p>\n

We should get the code like that in our gantt.component.ts file:<\/p>\n

import<\/span> {<\/span> Component,<\/span> ElementRef,<\/span> OnInit,<\/span> ViewChild,<\/span> ViewEncapsulation }<\/span> from '@angular\/core'<\/span>;<\/span>
\nimport<\/span> {<\/span> TaskService }<\/span> from '..\/services\/task.service'<\/span>;<\/span>
\nimport<\/span> {<\/span> LinkService }<\/span> from '..\/services\/link.service'<\/span>;<\/span>
\nimport<\/span> {<\/span> Gantt }<\/span> from 'dhtmlx-gantt'<\/span>;<\/span>
\n 
\n@<\/span>Component(<\/span>{<\/span>
\n    encapsulation:<\/span> ViewEncapsulation.None<\/span>,<\/span>
\n    selector:<\/span> 'gantt'<\/span>,<\/span>
\n    styleUrls:<\/span> [<\/span>'.\/gantt.component.css'<\/span>]<\/span>,<\/span>
\n    providers:<\/span> [<\/span>TaskService,<\/span> LinkService]<\/span>,<\/span>
\n    template:<\/span> `<<\/span>div class<\/span>=<\/span>"gantt-chart"<\/span>><\/<\/span>div><\/span>`,<\/span>
\n}<\/span>)<\/span>
\nexport<\/span> class<\/span> GanttComponent implements<\/span> OnInit {<\/span>
\n    @<\/span>ViewChild(<\/span>'gantt_here'<\/span>,<\/span> {<\/span> static<\/span>:<\/span> true<\/span> }<\/span>)<\/span> ganttContainer!:<\/span> ElementRef;<\/span>
\n
\n    constructor(<\/span>private taskService:<\/span> TaskService,<\/span> private linkService:<\/span> LinkService)<\/span> {<\/span> }<\/span>
\n 
\n    ngOnInit(<\/span>)<\/span> {<\/span>
\n        gantt.config<\/span>.date_format<\/span> =<\/span> '%Y-%m-%d %H:%i'<\/span>;<\/span>
\n        gantt.init<\/span>(<\/span>this<\/span>.ganttContainer<\/span>.nativeElement<\/span>)<\/span>;<\/span>
\n        Promise.all<\/span>(<\/span>[<\/span>this<\/span>.taskService<\/span>.get<\/span>(<\/span>)<\/span>,<\/span> this<\/span>.linkService<\/span>.get<\/span>(<\/span>)<\/span>]<\/span>)<\/span>
\n            .then<\/span>(<\/span>(<\/span>[<\/span>data,<\/span> links]<\/span>)<\/span> =><\/span> {<\/span>
\n                gantt.parse<\/span>(<\/span>{<\/span> data,<\/span> links }<\/span>)<\/span>;<\/span>
\n            }<\/span>)<\/span>;<\/span>
\n    }<\/span>
\n}<\/span><\/div><\/div>\n

Now, if we open an app, we should see our tasks with a link between them.
\n\"tasks<\/p>\n

Data Saving<\/h4>\n

In this tutorial, we’re not going to create an actual database and write a backend. Instead, we’ll mock the backend with the help of the angular-in-memory-web-api<\/a> library \u2013 it’ll intercept xhr requests and call data storage we’ll define on the client. If it’s not what you want, you can skip the first step and the app will call the real backend.<\/p>\n

1.<\/strong> At first, we should install angular-in-memory-web-api. For this, run the following command:<\/p>\n

npm install angular-in-memory-web-api --save<\/div><\/div>\n

Open “app.module.ts<\/strong>” to add InMemoryWebApiModule<\/strong> and define our mock database initialization. We will create a necessary class on the next step. For now, our app.module.ts should look like that:<\/p>\n

import<\/span> {<\/span> NgModule }<\/span> from "@angular\/core"<\/span>;<\/span>
\nimport<\/span> {<\/span> BrowserModule }<\/span> from "@angular\/platform-browser"<\/span>;<\/span>
\n
\nimport<\/span> {<\/span> AppRoutingModule }<\/span> from '.\/app-routing.module'<\/span>;<\/span>
\nimport<\/span> {<\/span> AppComponent }<\/span> from ".\/app.component"<\/span>;<\/span>
\nimport<\/span> {<\/span> GanttComponent }<\/span> from '.\/gantt\/gantt.component'<\/span>;<\/span>
\n
\nimport<\/span> {<\/span> HttpClientModule }<\/span> from '@angular\/common\/http'<\/span>;<\/span>
\nimport<\/span> {<\/span> HttpClientInMemoryWebApiModule }<\/span> from 'angular-in-memory-web-api'<\/span>;<\/span>
\nimport<\/span> {<\/span> InMemoryDataService }<\/span> from '.\/services\/in-memory-data.service'<\/span>
\n 
\n@<\/span>NgModule(<\/span>{<\/span>
\n  declarations:<\/span> [<\/span>AppComponent,<\/span> GanttComponent]<\/span>,<\/span>
\n  imports:<\/span> [<\/span>BrowserModule,<\/span> AppRoutingModule,<\/span> HttpClientModule,<\/span> HttpClientInMemoryWebApiModule.forRoot<\/span>(<\/span>InMemoryDataService)<\/span>]<\/span>,<\/span>
\n  providers:<\/span> [<\/span>]<\/span>,<\/span>
\n  bootstrap:<\/span> [<\/span>AppComponent]<\/span>,<\/span>
\n}<\/span>)<\/span>
\nexport<\/span> class<\/span> AppModule {<\/span>}<\/span><\/div><\/div>\n

For creating the in-memory-data<\/strong> service, run the following command:<\/p>\n

ng generate service services\/in-memory-data --flat --skip-tests<\/div><\/div>\n

In the newly created “in-memory-data.service.ts<\/strong>” file inside the “services<\/strong>” folder, we will add the next lines of code:<\/p>\n

import<\/span> {<\/span> InMemoryDbService }<\/span> from 'angular-in-memory-web-api'<\/span>;<\/span>
\n
\nexport<\/span> class<\/span> InMemoryDataService implements<\/span> InMemoryDbService {<\/span>
\n    createDb(<\/span>)<\/span> {<\/span>
\n        let tasks =<\/span> [<\/span>
\n            {<\/span> id:<\/span> 1<\/span>,<\/span> text:<\/span> 'Task #1'<\/span>,<\/span> start_date:<\/span> '2023-04-15 00:00'<\/span>,<\/span> duration:<\/span> 3<\/span>,<\/span> progress:<\/span> 0.6<\/span> }<\/span>,<\/span>
\n            {<\/span> id:<\/span> 2<\/span>,<\/span> text:<\/span> 'Task #2'<\/span>,<\/span> start_date:<\/span> '2023-04-18 00:00'<\/span>,<\/span> duration:<\/span> 3<\/span>,<\/span> progress:<\/span> 0.4<\/span> }<\/span>
\n        ]<\/span>;<\/span>
\n        let links =<\/span> [<\/span>
\n            {<\/span> id:<\/span> 1<\/span>,<\/span> source:<\/span> 1<\/span>,<\/span> target:<\/span> 2<\/span>,<\/span> type:<\/span> '0'<\/span> }<\/span>
\n        ]<\/span>;<\/span>
\n        return<\/span> {<\/span> tasks,<\/span> links }<\/span>;<\/span>
\n    }<\/span>
\n}<\/span><\/div><\/div>\n

2.<\/strong> Let us create a helper for our requests. To do that, create “service-helper.ts<\/strong>” with the following code:<\/p>\n

export<\/span> function<\/span> HandleError(<\/span>error:<\/span> any)<\/span>:<\/span> Promise{<\/span>
\nconsole.log<\/span>(<\/span>error)<\/span>;<\/span>
\nreturn<\/span> Promise.reject<\/span>(<\/span>error)<\/span>;<\/span>
\n}<\/span><\/div><\/div>\n

The HandleError will put an error to the console in case of some errors.<\/p>\n

3.<\/strong> Update our services to handle the adding, updating, and deleting of items. Open “task.service.ts” and add the following code to it:<\/p>\n

import<\/span> {<\/span> Injectable }<\/span> from '@angular\/core'<\/span>;<\/span>
\nimport<\/span> {<\/span> Task }<\/span> from '..\/models\/task'<\/span>;<\/span>
\nimport<\/span> {<\/span> HttpClient }<\/span> from '@angular\/common\/http'<\/span>;<\/span>
\nimport<\/span> {<\/span> HandleError }<\/span> from '.\/service-helper'<\/span>;<\/span>
\nimport<\/span> {<\/span> firstValueFrom }<\/span> from 'rxjs'<\/span>;<\/span>
\n 
\n@<\/span>Injectable(<\/span>)<\/span>
\nexport<\/span> class<\/span> TaskService {<\/span>
\n    private taskUrl =<\/span> 'api\/tasks'<\/span>;<\/span>
\n
\n    constructor(<\/span>private http:<\/span> HttpClient)<\/span> {<\/span>}<\/span>
\n
\n    get<\/span>(<\/span>)<\/span>:<\/span> Promise<<\/span>Task[<\/span>]<\/span>><\/span>{<\/span>
\n        return<\/span> firstValueFrom(<\/span>this<\/span>.http<\/span>.get<\/span>(<\/span>this<\/span>.taskUrl<\/span>)<\/span>)<\/span>
\n            .catch<\/span>(<\/span>HandleError)<\/span>;<\/span>
\n    }<\/span>
\n
\n    insert(<\/span>task:<\/span> Task)<\/span>:<\/span> Promise<<\/span>Task><\/span> {<\/span>
\n        return<\/span> firstValueFrom(<\/span>this<\/span>.http<\/span>.post<\/span>(<\/span>this<\/span>.taskUrl<\/span>,<\/span> task)<\/span>)<\/span>
\n            .catch<\/span>(<\/span>HandleError)<\/span>;<\/span>
\n    }<\/span>
\n
\n    update(<\/span>task:<\/span> Task)<\/span>:<\/span> Promise<<\/span>void><\/span> {<\/span>
\n        return<\/span> firstValueFrom(<\/span>this<\/span>.http<\/span>.put<\/span>(<\/span>`${<\/span>this<\/span>.taskUrl<\/span>}<\/span>\/<\/span>${<\/span>task.id<\/span>}<\/span>`,<\/span> task)<\/span>)<\/span>
\n            .catch<\/span>(<\/span>HandleError)<\/span>;<\/span>
\n    }<\/span>
\n
\n    remove(<\/span>id:<\/span> number)<\/span>:<\/span> Promise<<\/span>void><\/span> {<\/span>
\n        return<\/span> firstValueFrom(<\/span>this<\/span>.http<\/span>.delete<\/span>(<\/span>`${<\/span>this<\/span>.taskUrl<\/span>}<\/span>\/<\/span>${<\/span>id}<\/span>`)<\/span>)<\/span>
\n            .catch<\/span>(<\/span>HandleError)<\/span>;<\/span>
\n    }<\/span>
\n}<\/span><\/div><\/div>\n

We’ve defined taskUrl as a private element of our service. It contains a url to our REST API. In order to send HTTP requests, we’ve injected HTTP class into our service.<\/p>\n

To insert a new item, we send a POST request to our url with a new task in the body. To update an item, we send a PUT request to url\/item_id. This request also contains an updated task in the body. To remove an item, we send a delete request to url\/item_id. In this case, an item with such an id will be removed.<\/p>\n

Now, open “link.service.ts<\/strong>” and update our LinkService.<\/p>\n

import<\/span> {<\/span> Injectable }<\/span> from '@angular\/core'<\/span>;<\/span>
\nimport<\/span> {<\/span> Link }<\/span> from '..\/models\/link'<\/span>;<\/span>
\nimport<\/span> {<\/span> HttpClient }<\/span> from '@angular\/common\/http'<\/span>;<\/span>
\nimport<\/span> {<\/span> HandleError }<\/span> from '.\/service-helper'<\/span>;<\/span>
\nimport<\/span> {<\/span> firstValueFrom }<\/span> from 'rxjs'<\/span>;<\/span>
\n
\n@<\/span>Injectable(<\/span>)<\/span>
\nexport<\/span> class<\/span> LinkService {<\/span>
\n    private linkUrl =<\/span> 'api\/links'<\/span>;<\/span>
\n
\n    constructor(<\/span>private http:<\/span> HttpClient)<\/span> {<\/span>}<\/span>
\n
\n    get<\/span>(<\/span>)<\/span>:<\/span> Promise<<\/span>Link[<\/span>]<\/span>><\/span> {<\/span>
\n        return<\/span> firstValueFrom(<\/span>this<\/span>.http<\/span>.get<\/span>(<\/span>this<\/span>.linkUrl<\/span>)<\/span>)<\/span>
\n            .catch<\/span>(<\/span>HandleError)<\/span>;<\/span>
\n    }<\/span>
\n
\n    insert(<\/span>link:<\/span> Link)<\/span>:<\/span> Promise<<\/span>Link><\/span> {<\/span>
\n        return<\/span> firstValueFrom(<\/span>this<\/span>.http<\/span>.post<\/span>(<\/span>this<\/span>.linkUrl<\/span>,<\/span> link)<\/span>)<\/span>
\n            .catch<\/span>(<\/span>HandleError)<\/span>;<\/span>
\n    }<\/span>
\n
\n    update(<\/span>link:<\/span> Link)<\/span>:<\/span> Promise<<\/span>void><\/span> {<\/span>
\n        return<\/span> firstValueFrom(<\/span>this<\/span>.http<\/span>.put<\/span>(<\/span>`${<\/span>this<\/span>.linkUrl<\/span>}<\/span>\/<\/span>${<\/span>link.id<\/span>}<\/span>`,<\/span> link)<\/span>)<\/span>
\n            .catch<\/span>(<\/span>HandleError)<\/span>;<\/span>
\n    }<\/span>
\n
\n    remove(<\/span>id:<\/span> number)<\/span>:<\/span> Promise<<\/span>void><\/span> {<\/span>
\n    return<\/span> firstValueFrom(<\/span>this<\/span>.http<\/span>.delete<\/span>(<\/span>`${<\/span>this<\/span>.linkUrl<\/span>}<\/span>\/<\/span>${<\/span>id}<\/span>`)<\/span>)<\/span>
\n        .catch<\/span>(<\/span>HandleError)<\/span>;<\/span>
\n    }<\/span>
\n}<\/span><\/div><\/div>\n

It’s pretty much the same as TaskService and provides the same API for links.<\/p>\n

In the “gantt.component.ts” file, we need to add tasks editing logic. Since we import the gantt object from the module to avoid unexpected behavior, we should create a data processor and attach handlers via attachEvent<\/strong> only once. To ensure that the data processor is created only once each time the gantt is initialized (when switching between application pages), you can add a custom property to the gantt object, for example (gantt as any).$_initOnce = true<\/strong>.<\/p>\n

Next, we check if the gantt has this property. If it doesn’t, we initialize the gantt for the first time and create a data processor:<\/p>\n

        if<\/span>(<\/span>!<\/span>(<\/span>gantt as any)<\/span>.$_initOnce)<\/span>{<\/span>
\n            (<\/span>gantt as any)<\/span>.$_initOnce =<\/span> true<\/span>;<\/span>
\n
\n            const<\/span> dp =<\/span> gantt.createDataProcessor<\/span>(<\/span>...
\n        }<\/span><\/div><\/div>\n

If the property exists, then the gantt is already configured, and we need to skip creating the data processor.<\/p>\n

If using the Commercial\/Enterprise\/Ultimate licenses of DHTMLX Gantt, we can create a new gantt object (const gantt = Gantt.getGanttInstance()<\/strong>) and configure it when starting the component (ngOnInit<\/strong>), and destroy the created gantt (gantt.destructor()<\/strong>) when exiting the component (ngOnDestroy<\/strong>). This way, each launch of the component will start with a clean gantt, and the check will not be needed.<\/p>\n

import<\/span> {<\/span> Component,<\/span> ElementRef,<\/span> OnInit,<\/span> ViewChild,<\/span> ViewEncapsulation }<\/span> from '@angular\/core'<\/span>;<\/span>
\nimport<\/span> {<\/span> TaskService }<\/span> from '..\/services\/task.service'<\/span>;<\/span>
\nimport<\/span> {<\/span> LinkService }<\/span> from '..\/services\/link.service'<\/span>;<\/span>
\nimport<\/span> {<\/span> Task }<\/span> from '..\/models\/task'<\/span>;<\/span>
\nimport<\/span> {<\/span> Link }<\/span> from '..\/models\/link'<\/span>;<\/span>
\n
\nimport<\/span> {<\/span> gantt }<\/span> from 'dhtmlx-gantt'<\/span>;<\/span>
\n 
\n@<\/span>Component(<\/span>{<\/span>
\n    encapsulation:<\/span> ViewEncapsulation.None<\/span>,<\/span>
\n    selector:<\/span> 'gantt'<\/span>,<\/span>
\n    styleUrls:<\/span> [<\/span>'.\/gantt.component.css'<\/span>]<\/span>,<\/span>
\n    providers:<\/span> [<\/span>TaskService,<\/span> LinkService]<\/span>,<\/span>
\n    template:<\/span> `<<\/span>div class<\/span>=<\/span>"gantt-chart"<\/span>><\/<\/span>div><\/span>`,<\/span>
\n}<\/span>)<\/span>
\nexport<\/span> class<\/span> GanttComponent implements<\/span> OnInit {<\/span>
\n    @<\/span>ViewChild(<\/span>'gantt_here'<\/span>,<\/span> {<\/span> static<\/span>:<\/span> true<\/span> }<\/span>)<\/span> ganttContainer!:<\/span> ElementRef;<\/span>
\n
\n    constructor(<\/span>private taskService:<\/span> TaskService,<\/span> private linkService:<\/span> LinkService)<\/span> {<\/span> }<\/span>
\n 
\n    ngOnInit(<\/span>)<\/span> {<\/span>
\n        gantt.config<\/span>.date_format<\/span> =<\/span> '%Y-%m-%d %H:%i'<\/span>;<\/span>
\n        gantt.init<\/span>(<\/span>this<\/span>.ganttContainer<\/span>.nativeElement<\/span>)<\/span>;<\/span>
\n
\n        if<\/span>(<\/span>!<\/span>(<\/span>gantt as any)<\/span>.$_initOnce)<\/span>{<\/span>
\n            (<\/span>gantt as any)<\/span>.$_initOnce =<\/span> true<\/span>;<\/span>
\n
\n            const<\/span> dp =<\/span> gantt.createDataProcessor<\/span>(<\/span>{<\/span>
\n                task:<\/span> {<\/span>
\n                    update:<\/span> (<\/span>data:<\/span> Task)<\/span> =><\/span> this<\/span>.taskService<\/span>.update<\/span>(<\/span>data)<\/span>,<\/span>
\n                    create:<\/span> (<\/span>data:<\/span> Task)<\/span> =><\/span> this<\/span>.taskService<\/span>.insert<\/span>(<\/span>data)<\/span>,<\/span>
\n                    delete<\/span>:<\/span> (<\/span>id:<\/span> any)<\/span> =><\/span> this<\/span>.taskService<\/span>.remove<\/span>(<\/span>id)<\/span>,<\/span>
\n                }<\/span>,<\/span>
\n                link:<\/span> {<\/span>
\n                    update:<\/span> (<\/span>data:<\/span> Link)<\/span> =><\/span> this<\/span>.linkService<\/span>.update<\/span>(<\/span>data)<\/span>,<\/span>
\n                    create:<\/span> (<\/span>data:<\/span> Link)<\/span> =><\/span> this<\/span>.linkService<\/span>.insert<\/span>(<\/span>data)<\/span>,<\/span>
\n                    delete<\/span>:<\/span> (<\/span>id:<\/span> any)<\/span> =><\/span> this<\/span>.linkService<\/span>.remove<\/span>(<\/span>id)<\/span>,<\/span>
\n                }<\/span>
\n            }<\/span>)<\/span>;<\/span>
\n        }<\/span>
\n
\n        Promise.all<\/span>(<\/span>[<\/span>this<\/span>.taskService<\/span>.get<\/span>(<\/span>)<\/span>,<\/span> this<\/span>.linkService<\/span>.get<\/span>(<\/span>)<\/span>]<\/span>)<\/span>
\n            .then<\/span>(<\/span>(<\/span>[<\/span>data,<\/span> links]<\/span>)<\/span> =><\/span> {<\/span>
\n                gantt.parse<\/span>(<\/span>{<\/span> data,<\/span> links }<\/span>)<\/span>;<\/span>
\n            }<\/span>)<\/span>;<\/span>
\n    }<\/span>
\n}<\/span><\/div><\/div>\n

Here we’ve defined a dataProcessor<\/a> handler that will capture changes made in gantt by the user and will transfer them to data services.<\/p>\n

The handler can be declared either as a function or a router object, we’ve used the latter approach here.<\/p>\n

Gantt accepts Promise response from the handler, so the gantt will correctly process the completion of an action.<\/p>\n

If your service changes a task or a link id after creating a new record (which it usually does), make sure that your Promise returns an object with {id: databaseId} or {tid: databaseId} as a result, so Gantt could apply new database id to the record.<\/p>\n

Keep in mind that in this demo we’ve used angular-in-memory-api library to emulate the data storage, but in real life you\u2019ll most probably want to save changes to the real database. In order to do that you\u2019ll either need to remove in-memory-web-api from the app, or configure it to pass requests through to the real backend<\/a>, and implement a data storage.<\/p>\n

Once again, you are welcome to check a complete demo of our gantt chart and Angular on GitHub<\/a>.<\/p>\n

Thank you in advance and stay tuned for new tutorials!<\/p>\n","protected":false},"excerpt":{"rendered":"

Note: The information provided in this tutorial is outdated. We are working on a refreshed version, but in the meantime, please follow the relevant step-by-step guide in the DHTMLX …<\/p>\n","protected":false},"author":2,"featured_media":4327,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,71,1,38],"tags":[33,59,20,14,60],"class_list":["post-3963","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-posts-for-codeproject-com","category-tutorials","category-uncategorized","category-visible","tag-all-posts","tag-angular","tag-gantt","tag-tips","tag-integrations-gantt"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/3963","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=3963"}],"version-history":[{"count":25,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/3963\/revisions"}],"predecessor-version":[{"id":15153,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/3963\/revisions\/15153"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/4327"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=3963"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=3963"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=3963"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}