bryntum-angular

name	bryntum-angular
description	Angular-specific patterns for Bryntum components. Use this alongside the `bryntum` skill when building or integrating any Bryntum product (Scheduler, Gantt, Calendar, Grid, TaskBoard, Scheduler Pro) in an Angular project. Trigger when the project has Angular in package.json or when the user asks about Angular + Bryntum integration, template binding, standalone components, or @bryntum/*-angular packages.
metadata	{"tags":"bryntum, angular, standalone"}

Quick-start guide

Fetch before writing code: https://bryntum.com/products/{product}/docs-llm/guide/{Product}/quick-start/angular.md

---

Angular

Framework wrapper package: @bryntum/{product}-angular

Component selector

Use the kebab-case selector, e.g. <bryntum-gantt>, <bryntum-scheduler>, <bryntum-grid>.

Binding props

Every config prop must be bound with [prop]="..." in the template — not as a plain attribute:

<bryntum-gantt
    [columns]="ganttConfig.columns"
    [project]="ganttConfig.project"
    [viewPreset]="ganttConfig.viewPreset">
</bryntum-gantt>

Config separation

Copy the demo's exported …Props config objects into a separate Bryntum config file (e.g. gantt.config.ts) imported by your component. Do not overwrite the scaffold's app.config.ts — that is Angular's ApplicationConfig, not a Bryntum file.

Standalone component setup

Use standalone components (Angular 17+). Add the Bryntum module to imports in @Component:

import { BryntumGanttModule } from '@bryntum/gantt-angular';

@Component({
    standalone : true,
    imports    : [BryntumGanttModule],
    templateUrl: './app.component.html',
})
export class AppComponent {
    ganttConfig = { ... };
}

Sizing

See the Sizing section of the bryntum skill for the general rule. Angular's app-root is a block element, so use a flex layout rather than height: 100%:

html, body { height: 100%; margin: 0; }
app-root { display: flex; flex: 1 1 100%; flex-direction: column; }