Kanban - HTML UI Elements for Mobile & Web Applications | www.HtmlElements.com
JavaScriptJavaScriptAngularAngularVueVueReactReact

Kanban for Angular

Angular standalone version of this topic (compatible with Angular 17+). Import both the Smart UI component and module in the standalone component.

What this topic covers: practical setup, the framework-specific API access pattern, and copy-adapt guidance for the examples in this page.

import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { KanbanComponent, KanbanModule } from 'smart-webcomponents-angular/kanban';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, KanbanModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  @ViewChild('kanban', { read: KanbanComponent, static: false }) kanban!: KanbanComponent;
}
<!-- app.component.html -->
<smart-kanban #kanban></smart-kanban>

Use this.kanban for API methods in this topic.

Kanban Users

Each task in Smart.Kanban can be assigned to a user. Users are defined in the users property/array, each member of which can have the following fields:

  • id - The user's unique ID. Corresponds to the userId field in the data source and the property currentUser.
  • name - The user's name as it will appear in the Users list and "Assigned to" editor.
  • image - A url to an image representing the user (avatar).
  • allowAdd - sets whether the user has a privilege to add or copy tasks; true by default.
  • allowComment - sets whether the user has a privilege to add comments to tasks; true by default.
  • allowDrag - sets whether the user has a privilege to drag tasks. Works along with the property allowDrag; true by default.
  • allowEdit - sets whether the user has a privilege to edit tasks. Works along with the property editable; true by default.
  • allowRemove - sets whether the user has a privilege to remove tasks; true by default.
componentOptions = {
            collapsible: true,
            currentUser: 2, // The current user is the one with id 2 - Janet
            dataSource: getKanbanData(),
            editable: true,
            userList: true,
            users: [
                { id: 0, name: 'Andrew', image: '../../images/people/andrew.png' },
                { id: 1, name: 'Anne', image: '../../images/people/anne.png' },
                { id: 2, name: 'Janet', image: '../../images/people/janet.png' },
                { id: 3, name: 'John', image: '../../images/people/john.png' },
                { id: 4, name: 'Laura', image: '../../images/people/laura.png' }
            ],
            columns: [
                { label: 'To do', dataField: 'toDo' },
                { label: 'In progress', dataField: 'inProgress' },
                { label: 'Testing', dataField: 'testing' },
                { label: 'Done', dataField: 'done' }
            ]
};

When the property currentUser is set to the id of an user, the respective user's privileges are enacted.

Assigning a User to a Task

A user can be assigned to a task by opening the Users list by clicking the user icon in a task and selecting a user:

To enable the Users list, userList has to be set to true. To enable the task user icon, taskUserIcon has to be set to true.

Asignees can also be changed from the edit dialog (more information in the topic Kanban Editing and Customization).

Task Comments

Task comments can be loaded from the data source. When a currentUser with comment privileges is set, comments can also be written about tasks and saved in the data source.

To write a comment, click the Comments icon (visible when the property taskComments is enabled), enter the comment's content in the textarea and click "Send".

The new number of comments is reflected in the number that appears next to the Comments icon.


Existing comments that are written by the current user can be edited or removed by clicking the button next to the comment's timestamp:

For AI tooling

Developer Quick Reference

Topic: kanban-users-comments   Component: Kanban   Framework: Angular

Main methods: (none detected)

Common config keys: dataSource, columns

Implementation Notes

Compatibility: Angular 17+ (standalone)   API access pattern: @ViewChild(...) + this.component.method()

Lifecycle guidance: Bind inputs declaratively and call imperative API through @ViewChild in/after ngAfterViewInit.

Common pitfalls:

  • Using @ViewChild API too early (before view init).
  • Omitting standalone imports for Smart modules in @Component.imports.
  • Type mismatches between configuration fields and template bindings.

Validation checklist:

  • Ensure module import exists in standalone component imports array.
  • Use typed @ViewChild(..., { read: ComponentType }).
  • Call imperative methods after view initialization.