v7.3.0

Bryntum TaskBoard: Quick start guide for Angular integration

Using an AI coding assistant? Install the Bryntum MCP server to give it access to version-specific Bryntum documentation.

Try Angular demos

Bryntum TaskBoard ships with several demo Angular applications that showcase its functionality. Each demo has been tested and confirmed to be compatible with Node.js 20.

View online Angular demosBuild and run Angular demos

Version requirements

Minimum supported:

  • Angular: 9.0.0 or higher
  • TypeScript: 3.6.0 or higher (for TypeScript application)
  • Vite 4.0.0 or higher (for application build with Vite)

Recommended:

  • Angular: 12.0.0 or higher
  • TypeScript: 4.0.0 or higher (for TypeScript application)
  • Vite 5.0.0 or higher (for application build with Vite)

Create Angular application

This quick start guide will show you how to integrate Bryntum TaskBoard into your Angular applications.

To illustrate the integration process, we'll build a simple application that looks like the image below.

Here's a breakdown of the process we'll follow:

  1. Access the Bryntum npm registry
  2. Create an Angular application
  3. Install the Bryntum TaskBoard component
  4. Add the component to the application
  5. Apply styles
  6. Run the application

Access to npm registry

You can try out Bryntum components for free using our public Bryntum trial packages. If you have a Bryntum license, please refer to our Npm Repository Guide to access the private Bryntum repository.

Create application

As with all the examples included in the distribution, we will use the Angular CLI to build Angular applications.

Install the Angular CLI with the following command:

npm install -g @angular/cli

Use the Angular CLI to create a basic application using Typescript:

ng new taskboard-app --no-standalone --no-routing --ssr=false

You can replace taskboard-app with your preferred application name.

Bryntum components render on the client side. We use --ssr=false to indicate that server-side rendering is not required.

You will be prompted to select a stylesheet format. We recommend choosing either CSS or SCSS. This guide covers both options.

Now move to your application folder:

cd taskboard-app

Install the component

From your terminal, update project dependencies using the following commands:

Trial versionLicensed version
npm install @bryntum/taskboard@npm:@bryntum/taskboard-trial@7.3.0 @bryntum/taskboard-angular@7.3.0

npm install @bryntum/taskboard@7.3.0 @bryntum/taskboard-angular@7.3.0
If you're using the licensed Bryntum version, ensure that you have configured your npm properly to get access to the Bryntum packages. If not, refer to this guide.

Add the component to the application

Starting from Angular v20, file naming conventions have changed.
  • app.module.ts → app-module.ts
  • app.component.ts → app.ts
  • app.component.html → app.html
  • Class AppComponent → Class App
If you are on earlier version, please adjust the filenames and class names accordingly.

Edit the src/app/app-module.ts file and add the following import:

import { BryntumTaskBoardModule } from "@bryntum/taskboard-angular";

Next, add BryntumTaskBoardModule to imports[] :

@NgModule({
    imports : [
        BryntumTaskBoardModule
    ]
})

Next, edit the src/app/app.ts file and replace its content with the following:

import { Component, ViewChild } from '@angular/core';
import { BryntumTaskBoardComponent, BryntumTaskBoardProjectModelComponent } from '@bryntum/taskboard-angular';
import { taskBoardProps, projectProps } from './app.config';

@Component({
    selector    : 'app-root',
    standalone  : false,
    templateUrl : './app.html',
    styleUrl    : './app.css'
  })
  export class App {

    taskBoardProps = taskBoardProps;
    projectProps = projectProps;

    @ViewChild('taskboard') taskBoardComponent!: BryntumTaskBoardComponent;
    @ViewChild('project') projectComponent!: BryntumTaskBoardProjectModelComponent;
}

If you're using SCSS styling, replace './app.css' with './app.scss'.

Add component data

Create a public/data/data.json file for example data and add the following JSON data to it:

{
  "success": true,
  "tasks": {
    "rows": [
      { "id": 1, "name": "Design landing page", "status": "doing", "description": "Creating layout for the new landing page" },
      { "id": 2, "name": "Set up database schema", "status": "todo",  "description": "Define tables and relationships for user data" },
      { "id": 3, "name": "Write API documentation", "status": "done",  "description": "Document the REST endpoints for the project" },
      { "id": 4, "name": "Create login screen", "status": "doing", "description": "Implement authentication UI with validation" },
      { "id": 5, "name": "Integrate payment gateway", "status": "todo",  "description": "Connect Stripe API to the backend" },
      { "id": 6, "name": "Fix navigation bugs", "status": "done",  "description": "Resolve reported issues with navbar links" },
      { "id": 7, "name": "Build notification system", "status": "doing", "description": "Real-time push notifications for events" },
      { "id": 8, "name": "Add unit tests", "status": "todo",  "description": "Write tests for services and components" },
      { "id": 9, "name": "Optimize image loading", "status": "done",  "description": "Implement lazy loading for large images" },
      { "id": 10, "name": "Deploy staging server", "status": "doing", "description": "Set up CI/CD pipeline for staging environment" },
      { "id": 11, "name": "Create user profile page", "status": "todo",  "description": "Design and implement profile management UI" },
      { "id": 12, "name": "Implement role-based access control", "status": "todo",  "description": "Restrict features based on user roles" },
      { "id": 13, "name": "Set up error logging", "status": "todo",  "description": "Integrate centralized error monitoring tool" },
      { "id": 14, "name": "Improve form validation", "status": "todo",  "description": "Enhance validation rules for all forms" },
      { "id": 15, "name": "Add search functionality", "status": "todo",  "description": "Implement search bar with filtering options" }
    ]
  },
  "resources": {
    "rows": [
      { "id": 1, "name": "Angelo"  },
      { "id": 2, "name": "Celia"   },
      { "id": 3, "name": "Dave"    },
      { "id": 4, "name": "Emilia"  },
      { "id": 5, "name": "Gloria"  },
      { "id": 6, "name": "Henrik"  },
      { "id": 7, "name": "Kate"    }
    ]
  },
  "assignments": {
    "rows": [
      { "id": 1, "event": 1, "resource": 1 },
      { "id": 2, "event": 2, "resource": 2 },
      { "id": 3, "event": 3, "resource": 3 },
      { "id": 4, "event": 4, "resource": 4 },
      { "id": 5, "event": 5, "resource": 5 },
      { "id": 6, "event": 6, "resource": 6 },
      { "id": 7, "event": 7, "resource": 7 },
      { "id": 8, "event": 8, "resource": 1 },
      { "id": 9, "event": 9, "resource": 2 },
      { "id": 10, "event": 10, "resource": 3 },
      { "id": 11, "event": 11, "resource": 4 },
      { "id": 12, "event": 12, "resource": 5 },
      { "id": 13, "event": 1, "resource": 5 },
      { "id": 14, "event": 2, "resource": 5 },
      { "id": 15, "event": 3, "resource": 5 },
      { "id": 16, "event": 4, "resource": 5 },
      { "id": 17, "event": 6, "resource": 5 },
      { "id": 18, "event": 7, "resource": 5 }
    ]
  }
}

The Bryntum TaskBoard uses multiple stores to manage its data, with each store dedicated to a specific type. For example, the Resource Store holds resource data such as people or assets. This separation keeps the data organized, synchronized, and easier to maintain.

To learn more, visit Using TaskBoard Stores

Create a src/app/app.config.ts file with the following content:

import { BryntumTaskBoardProps, BryntumTaskBoardProjectModelProps } from '@bryntum/taskboard-angular';

export const projectProps: BryntumTaskBoardProjectModelProps = {
    loadUrl  : 'data/data.json',
    autoLoad : true
};

export const taskBoardProps: BryntumTaskBoardProps = {
    columns : [
        { id : 'todo', text : 'Todo', color : 'deep-orange' },
        { id : 'doing', text : 'Doing', color : 'orange' },
        { id : 'done', text : 'Done', color : 'light-green' }
    ],
    columnField : 'status'
};

Finally, edit the src/app/app.html file and replace its content with the following:

<bryntum-task-board-project-model
    #project
    [loadUrl] = "projectProps.loadUrl!"
    [autoLoad] = "projectProps.autoLoad!"
></bryntum-task-board-project-model>

<bryntum-task-board
    #taskboard
    [project] = "project"
    [columns] = "taskBoardProps.columns!"
    [columnField] = "taskBoardProps.columnField!"
></bryntum-task-board>

Apply styles

Bryntum TaskBoard needs a theme and structural CSS to render correctly. If you are not replacing the icons used by the component, you will also need to include Font Awesome.

The following CSS files are provided in the Bryntum npm packages or in the /build folder of the distribution:

File Contents
taskboard.css Structural CSS
svalbard-light.css Svalbard Light theme
svalbard-dark.css Svalbard Dark theme
visby-light.css Visby Light theme
visby-dark.css Visby Dark theme
stockholm-light.css Stockholm Light theme
stockholm-dark.css Stockholm Dark theme
material3-light.css Material3 Light theme
material3-dark.css Material3 Dark theme
fluent2-light.css Fluent2 Light theme
fluent2-dark.css Fluent2 Dark theme
fontawesome/css/fontawesome.css Font Awesome Free base CSS
fontawesome/css/solid.css Font Awesome Free solid icons

You need to reference the selected CSS file in your project.

Build foldernpm
Copy the CSS file you're using, its paired .css.map file, and the font folder into a folder in your project, such as src/app.
We also recommend copying the .css.map file paired with the CSS file you selected.
Edit the src/app/app.ts file and add a reference to the CSS file location as follows: 
styleUrls: [
  "./app.css",
  "./fontawesome/css/fontawesome.css",
  "./fontawesome/css/solid.css",
  "./taskboard.css",
  "./material3-light.css",
];
Edit the src/styles.css or src/styles.scss file and add the following: 
/* FontAwesome is used for icons */
@import "@bryntum/taskboard/fontawesome/css/fontawesome.css";
@import "@bryntum/taskboard/fontawesome/css/solid.css";
/* Structural CSS */
@import "@bryntum/taskboard/taskboard.css";
/* Bryntum theme of your choice */
@import "@bryntum/taskboard/material3-light.css";
If you want to customize the default theme, override the relevant set of CSS variables after the import. Visit the section on creating a custom theme for more info.
The Bryntum components expect styling to be available globally, if you move the styling to app.css, it won't work, until you add the following lines of code to app.ts: 
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  standalone: false,
  styleUrl: './app.scss',
  encapsulation: ViewEncapsulation.None
})

Sizing the component

By default, the Bryntum TaskBoard component is configured to occupy 100% of the parent DOM element with a min-height of 10em.

To display the component at the appropriate size, you can, for example, set parent components to take up the full height of the screen.

CSSSCSS
In the src/styles.css file, add the following: 
body,
html {
    margin         : 0;
    display        : flex;
    flex-direction : column;
    height         : 100vh;
    font-family    : sans-serif;
    font-size      : 14px;
}

app-root {
  flex: 1 1 100%;
}
In the src/styles.scss file, add the following: 
body,
html {
    margin         : 0;
    display        : flex;
    flex-direction : column;
    height         : 100vh;
    font-family    : sans-serif;
    font-size      : 14px;
}

app-root {
  flex: 1 1 100%;
}

Various component-sizing solutions are available, so you can adapt the code above to suit your layout needs. For more information, see our sizing the component documentation.

Run the application

From your terminal, run:

ng serve

You can now see your application at http://localhost:4200.

Troubleshooting

If you run into issues while setting up your Bryntum TaskBoard component, refer to our troubleshooting guide for Bryntum TaskBoard with Angular.

What to do next?

Advanced integration with Angular

Visit our comprehensive Angular guide to learn more about integrating Bryntum TaskBoard with Angular and customizing your application.

Working with data in Bryntum TaskBoard

Bryntum components often use multiple data collections and entities.

For a detailed explanation of how these elements interact, see our guide to tasks in Bryntum TaskBoard.

Contents