Skip to content
MemberJunction

@memberjunction/ng-tasks

Angular components for task visualization and management with Gantt chart support. Provides a simple hierarchical list view and a Gantt timeline view with dependency arrows, both working with MemberJunction TaskEntity data.

Installation

Section titled “Installation”
Terminal window
npm install @memberjunction/ng-tasks

Overview

Section titled “Overview”

The tasks package provides two interchangeable visualization modes for task data: a clean hierarchical list and a Gantt chart timeline. A wrapper component provides a toggle to switch between views. Tasks support dependencies via DependsOnTaskID, displayed as indentation in list view and dependency arrows in Gantt view.

flowchart TD
    subgraph Container["TaskComponent"]
        A["View Toggle"]
        A -->|simple| B["SimpleTaskViewerComponent"]
        A -->|gantt| C["GanttTaskViewerComponent"]
    end
    subgraph List["Simple View"]
        D["Hierarchical list with indentation"]
        E["Status icons and color coding"]
        F["Expand/collapse subtasks"]
    end
    subgraph Gantt["Gantt View"]
        G["Timeline bars"]
        H["Dependency arrows"]
        I["Progress indicators"]
    end

    B --> List
    C --> Gantt

    style Container fill:#2d6a9f,stroke:#1a4971,color:#fff
    style List fill:#2d8659,stroke:#1a5c3a,color:#fff
    style Gantt fill:#7c5295,stroke:#563a6b,color:#fff

Usage

Section titled “Usage”

Standalone Component Import

Section titled “Standalone Component Import”
import { TaskComponent } from '@memberjunction/ng-tasks';


@Component({
  imports: [TaskComponent],
  // ...
})
export class YourComponent {}

Basic Usage

Section titled “Basic Usage”
<mj-task
  [tasks]="projectTasks"
  [title]="'Project Tasks'"
  [description]="'Active tasks for Q1'"
  [viewMode]="'simple'"
  (taskClicked)="onTaskClick($event)"
  (viewModeChanged)="onViewModeChange($event)">
</mj-task>

Individual Sub-Components

Section titled “Individual Sub-Components”
<!-- List view only -->
<mj-simple-task-viewer
  [tasks]="tasks"
  (taskClicked)="onTaskClick($event)">
</mj-simple-task-viewer>


<!-- Gantt view only -->
<mj-gantt-task-viewer
  [tasks]="tasks"
  (taskClicked)="onTaskClick($event)">
</mj-gantt-task-viewer>

Components

Section titled “Components”
ComponentSelectorPurpose
TaskComponentmj-taskComposite wrapper with view toggle
SimpleTaskViewerComponentmj-simple-task-viewerHierarchical list view
GanttTaskViewerComponentmj-gantt-task-viewerGantt chart timeline

TaskComponent API

Section titled “TaskComponent API”

Inputs

Section titled “Inputs”
PropertyTypeDefaultDescription
tasksTaskEntity[][]Array of task entities
titlestringundefinedOptional header title
descriptionstringundefinedOptional header description
showHeaderbooleantrueShow the header area
viewModeTaskViewMode'simple'Initial view mode: 'simple' or 'gantt'

Outputs

Section titled “Outputs”
EventTypeDescription
taskClickedEventEmitter<TaskEntity>Task was clicked
viewModeChangedEventEmitter<TaskViewMode>View mode toggled

Exported Types

Section titled “Exported Types”
  • TaskViewMode — 'simple' | 'gantt'
  • GanttTask — Interface for Gantt chart task data

Dependencies

Section titled “Dependencies”