Column template in Angular Gantt component

28 Sep 20234 minutes to read

A column template is used to customize the column’s look. The following code example explains how to define the custom template in Gantt using the template property.

app.component.ts

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';
import { GanttData } from './data';

@Component({
    selector: 'app-root',
    template:
        `<ejs-gantt id="ganttDefault" height="430px" [dataSource]="data" [splitterSettings] = "splitterSettings"  [taskFields]="taskSettings">
        <e-columns>
                    <e-column field='TaskID' headerText='TaskID' textAlign='Left' width=90></e-column>
                    <e-column field='TaskName' headerText='TaskName' textAlign='Left' width=150></e-column>
                    <e-column field='StartDate'  headerText='StartDate' textAlign=Left width=120>
                    <ng-template #template let-data>
                    
                    </ng-template>
                    </e-column>
                    <e-column field='Duration' headerText='Duration' textAlign='Left' width=150></e-column>
                    <e-column field='Progress' headerText='Progress' textAlign=Left width=150></e-column>
                </e-columns>
       </ejs-gantt>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    // Data for Gantt
    public data?: object[];
    public taskSettings?: object;
    public splitterSettings?: object;
    public ngOnInit(): void {
        this.data = GanttData;
        this.taskSettings = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            endDate: 'EndDate',
            duration: 'Duration',
            progress: 'Progress',
            dependency: 'Predecessor',
            child: 'subtasks'
        };
        this.splitterSettings = {
            columnIndex: 4
        };
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, GanttModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);