Member Junction
    Preparing search index...

    Class MjGanttChartComponent

    Generic Gantt chart component wrapping DHTMLX Gantt.

    Renders items as bars on a timeline with hierarchy, dependency arrows, and progress indicators. The library is loaded lazily via dynamic import.

    <mj-gantt-chart
        [Items]="projectTasks"
        [Links]="taskDependencies"
        [Height]="'600px'"
        (ItemClicked)="onTaskClicked($event)">
    </mj-gantt-chart>

    Implements

    • AfterViewInit
    • OnChanges
    • OnDestroy
    Index

    Constructors

    constructor

    Properties

    AfterColumnResize AfterGridResize AfterZoomChange BeforeColumnResize BeforeGridResize BeforeZoomChange Columns EnableColumnResize EnableGridResize EnableGridScroll EnableTooltips EnableZoom ganttContainer Height ItemChanged ItemClicked ItemDoubleClicked Items Links loading ReadOnly ShowProgress ShowZoomControls

    Accessors

    CanZoomIn CanZoomOut ColumnWidths CurrentColumnWidths CurrentGridWidth CurrentZoomPercent GridWidth ZoomLevel

    Methods

    ngAfterViewInit ngOnChanges ngOnDestroy Refresh SetZoomLevel ZoomIn ZoomOut

    Constructors

    Properties

    AfterColumnResize: EventEmitter<AfterColumnResizeEventArgs> = ...

    Fired after a grid column is resized.

    AfterGridResize: EventEmitter<AfterGridResizeEventArgs> = ...

    Fired after the grid/timeline splitter is released.

    AfterZoomChange: EventEmitter<AfterZoomChangeEventArgs> = ...

    Fired after a zoom change that was not canceled.

    BeforeColumnResize: EventEmitter<BeforeColumnResizeEventArgs> = ...

    Fired before a grid column resize starts.

    BeforeGridResize: EventEmitter<BeforeGridResizeEventArgs> = ...

    Fired before the grid/timeline splitter drag starts.

    BeforeZoomChange: EventEmitter<BeforeZoomChangeEventArgs> = ...

    Fired before a zoom change. Set event.Cancel = true to keep the current level.

    Columns: GanttColumnDef[] | null = null

    Grid column definitions. Defaults to Name, Start, Duration, Progress.

    EnableColumnResize: boolean = true

    Ask DHTMLX to allow dragging grid column borders. Column-border resize is a DHTMLX Gantt PRO feature — the GPL/community build we ship does not render those handles. The grid/timeline splitter (EnableGridResize) still works. Hover the Name cell or bar for the full title when the column is too narrow.

    EnableGridResize: boolean = true

    Show the splitter between the grid and the timeline.

    EnableGridScroll: boolean = true

    Give the left grid its own horizontal scrollbar so columns can be wider than the pane without growing the timeline.

    EnableTooltips: boolean = true

    Show the full item name (and dates) on hover for truncated grid/bar text.

    EnableZoom: boolean = true

    When true, Ctrl/Cmd + wheel and ZoomIn/ZoomOut change the timeline scale.

    ganttContainer: ElementRef<HTMLDivElement>
    Height: string = '500px'

    CSS height for the chart container.

    ItemChanged: EventEmitter<GanttItemChangedEvent> = ...

    Emitted when an item is changed via drag/resize (only if not ReadOnly).

    ItemClicked: EventEmitter<GanttItemClickedEvent> = ...

    Emitted when an item bar or grid row is clicked.

    ItemDoubleClicked: EventEmitter<GanttItemClickedEvent> = ...

    Emitted when an item bar or grid row is double-clicked.

    Items: GanttItemData[] = []

    Items (bars) to render on the timeline.

    Links: GanttLinkData[] = []

    Dependency links (arrows) between items.

    loading: boolean = true
    ReadOnly: boolean = true

    Disables drag, resize, and link editing.

    ShowProgress: boolean = true

    Show progress fill on bars.

    ShowZoomControls: boolean = false

    Show built-in +/- zoom controls above the chart.

    Accessors

    • get ZoomLevel(): "hour" | "day" | "week" | "month" | "quarter" | "year"

      Returns "hour" | "day" | "week" | "month" | "quarter" | "year"

    • set ZoomLevel(
          value: "hour" | "day" | "week" | "month" | "quarter" | "year",
      ): void

      Timeline scale to apply. Callers can bind a persisted level here. Defaults to week (100%).

      Parameters

      • value: "hour" | "day" | "week" | "month" | "quarter" | "year"

      Returns void

    Methods

    • A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.

      Returns Promise<void>

    • A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.

      Parameters

      • changes: { [propName: string]: SimpleChange<any> }

        The changed properties.

      Returns void

    • A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.

      Returns void

    • Parameters

      • level: "hour" | "day" | "week" | "month" | "quarter" | "year"

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods