@leftwitch/ngx-gantt v1.4.1

ngx-gantt

Angular wrapper for Frappe-Gantt

📥 Installing

Install via npm:

npm i @leftwitch/ngx-gantt

Install types for Frappe-Gantt (optional):

npm i --save-dev @types/frappe-gantt

⚙️ Setup

Import the NgxGanttModule inside your Angular module.

Module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { NgxGanttModule } from 'ngx-gantt'
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxGanttModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Usage

Template

  <ngx-gantt 
    [config]="{date_format: 'YYYY-MM-DD'}"
    [tasks]="tasks"
    [viewMode]="GANTT_VIEW_MODE.DAY"
    (viewChange)="viewChange($event)" 
    (taskClick)="taskClick($event)" 
    (dateChange)="dateChange($event)" 
    (progressChange)="progressChange($event)"> 
  </ngx-gantt>

Component

import { Component } from '@angular/core';
import { GANTT_VIEW_MODE, TaskClickEvent, TaskDateChangeEvent, TaskProgressChangeEvent, GanttViewModeChangeEvent } from 'ngx-gantt';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  GANTT_VIEW_MODE = GANTT_VIEW_MODE;
  tasks = [
      {
        id: '_' + Math.random().toString(36).substr(2, 9),
        name: 'Redesign website',
        start: '2016-12-28',
        end: '2016-12-31',
        progress: 20,
        dependencies: null
      }
    ]

  taskClick(event: TaskClickEvent ) {
    console.log(event);
  }

  dateChange(event: TaskDateChangeEvent) {
    console.log(event);
  }

  progressChange(event: TaskProgressChangeEvent) {
    console.log(event);
  }

  viewChange(event: GanttViewModeChangeEvent) {
    console.log(event);
  }
}

📝 Note

• Try to avoid changing the view_mode via the options
• The chart should update automatically as soon you add/edit and element in the tasks array
• To force an update of the Chart just set the tasks Input again (this.tasks = this.tasks)

🐞 Issues

If you encounter any bugs or similar problems, please open an issue so it can be fixed as soon as possible.