# gantt-resource-view

> Gantt chart sample presenting project tasks grouped by assigned resources.

**Framework:** angular  **Component:** Gantt  **Variant:** resource-view

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/angular/gantt-resource-view.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-angular-gantt
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/gantt-resource-view/resource-view.component.ts

```typescript
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { DayMarkersService, EditService, GanttComponent, GanttModule, ResizeService, SelectionService, ToolbarService } from '@syncfusion/ej2-angular-gantt';
import { resourcesData, resourceCollection } from '../data';
@Component({
    selector: 'ej2-ganttresourceview',
    templateUrl: 'resource-view.html',
    standalone: true,
    providers: [SelectionService, EditService, ResizeService, ToolbarService, DayMarkersService],
    imports: [ GanttModule]
})

export class GanttResourceViewComponent implements OnInit {
    public data!: object[];
    public resources!: object[];
    public taskSettings!: object;
    public columns!: object[];
    public labelSettings!: object;
    public splitterSettings!: object;
    public editSettings!: object;
    public toolbar!: (string | object)[];
    public resourceFields!: object ;
    public projectStartDate!: Date;
    public projectEndDate!: Date;
    public taskType!: string;
    @ViewChild('resourceview', { static: false })
    public ganttObj!: GanttComponent;
    public ngOnInit(): void {
        this.data = resourcesData;
        this.resources = resourceCollection;
        this.taskType = "FixedWork"
        this.taskSettings = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            endDate: 'EndDate',
            duration: 'Duration',
            progress: 'Progress',
			dependency: 'Predecessor',
            resourceInfo: 'resources',
            work: 'work',
            child: 'subtasks'
        };
        this.resourceFields = {
            id: 'resourceId',
            name: 'resourceName',
            unit: 'resourceUnit',
            group: 'resourceGroup'
        };
        this.columns =  [
			{ field: 'TaskID', visible: false },
            { field: 'TaskName', headerText: 'Name', width: 260 },
            { field: 'work', headerText: 'Work' },
            { field: 'Progress' },
            { field: 'resourceGroup', headerText: 'Group' },
            { field: 'StartDate' },
            { field: 'Duration' },
        ];
        this.editSettings = {
            allowAdding: true,
            allowEditing: true,
            allowDeleting: true,
            allowTaskbarEditing: true,
            showDeleteConfirmDialog: true
        };
        this.toolbar = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll',
        {text: 'Show/Hide Overallocation', tooltipText: 'Show/Hide Overallocation', id: 'showhidebar'}];
        this.splitterSettings = {
            columnIndex: 3
        }
        this.labelSettings = {
            rightLabel: 'resources',
            taskLabel: 'Progress'
        };
        this.projectStartDate= new Date('03/26/2025');
        this.projectEndDate= new Date('05/18/2025');
    }
    public toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'showhidebar') {
            this.ganttObj.showOverAllocation = !this.ganttObj.showOverAllocation;
        }
    }
}

```

### src/components/gantt-resource-view/resource-view.html

```html

<div class="control-section">
    <ejs-gantt id="ResourceView" #resourceview height="650px" rowHeight="46" taskbarHeight ="25" [dataSource]="data" [taskFields]="taskSettings" [columns]="columns" [treeColumnIndex]="1"
        [splitterSettings]="splitterSettings" [labelSettings]="labelSettings" [editSettings]="editSettings" 
        [allowSelection]="true" [allowResizing]="true" [projectStartDate]="projectStartDate" [projectEndDate]="projectEndDate" [highlightWeekends]="true"
        [toolbar]="toolbar" [resourceFields] = "resourceFields" [taskType] = "taskType"
        [resources]="resources" viewType="ResourceView" [showOverAllocation]= "true" (toolbarClick)="toolbarClick($event)">
    </ejs-gantt>
</div>

```