Module in Angular Gantt component
18 Oct 20253 minutes to read
The Angular Gantt component uses a modular architecture, enabling injection of specific service providers to activate features like sorting for task prioritization, toolbar for task management, or virtual scrolling for large datasets. This approach loads only necessary functionality, reducing bundle size and improving load times for projects, such as managing thousands of tasks in real-time. For example, injecting ToolbarService enables a customizable toolbar for adding or editing tasks, while SortService allows sorting by task duration. Modules support accessibility with ARIA labels for UI elements (e.g., context menus) and adapt to responsive designs for consistent display across devices, ensuring efficient performance and scalability.
Inject modules
Modules are injected at the component or module level to enable specific Gantt features. Component-level injection suits isolated Gantt instances, while module-level injection provides application-wide availability, ideal for multiple Gantt components. Each module corresponds to specific properties, such as toolbar for ToolbarService or editSettings for EditService.
Component-level injection
Inject modules in the component for localized feature activation:
import { Component } from '@angular/core';
import { SortService, FilterService, EditService, ToolbarService } from '@syncfusion/ej2-angular-gantt';
@Component({
selector: 'app-gantt',
template: `<ejs-gantt [dataSource]="data" [taskFields]="taskSettings"></ejs-gantt>`,
providers: [SortService, FilterService, EditService, ToolbarService]
})
export class GanttComponent {
public data: object[] = [];
public taskSettings: object = {};
}Module-level injection
Inject modules in the NgModule for application-wide availability:
import { NgModule } from '@angular/core';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { SortService, FilterService, EditService, ToolbarService, SelectionService } from '@syncfusion/ej2-angular-gantt';
@NgModule({
imports: [GanttModule],
providers: [SortService, FilterService, EditService, ToolbarService, SelectionService]
})
export class AppModule { }Available modules
-
Core data management:
- SortService: Enables column sorting with allowSorting.
- FilterService: Supports data filtering with allowFiltering.
- SelectionService: Allows row and cell selection with allowSelection.
- EditService: Enables task editing with editSettings.
-
UI enhancements:
- ToolbarService: Adds toolbar controls like export buttons with toolbar.
- ContextMenuService: Enables context menus with enableContextMenu.
- ColumnMenuService: Provides column menu options with showColumnMenu.
- ReorderService: Supports column reordering with allowReordering.
- ResizeService: Enables column resizing with allowResizing.
-
Advanced features:
- RowDDService: Allows row drag-and-drop with allowRowDragAndDrop.
- DayMarkersService: Supports event markers and holidays with eventMarkers and holidays.
- VirtualScrollService: Enables virtual scrolling for large datasets with enableVirtualization.
- CriticalPathService: Visualizes critical paths with enableCriticalPath.
- UndoRedoService: Supports undo/redo operations with enableUndoRedo.
-
Export features:
- ExcelExportService: Enables Excel exportallowExcelExport.
- PdfExportService: Supports PDF export with allowPdfExport.
Ensure modules are injected before using their features to avoid runtime errors. For responsive designs, module-enabled UI elements (e.g., toolbar, context menu) adapt automatically.