facebook
Bob at Genuitec
Virtual evangelist at large. The face of Genuitec often appearing in graphics. Pen-name for our more shy writers of content.
Posted on Jul 13th 2017

In this tutorial, we will be creating a simple Kanban board with Angular 4. A Kanban board is a work and workflow visualization tool that enables you to optimize the flow of your work, a basic Kanban board has a three-step workflow: To Do, In Progress, and Done.

Live Demo

kanban-board-blank

We represent every work item as a separate card on the board to allow us to track the progress of work through the workflow in a highly visual manner. For this tutorial, I am using Angular IDE, though you can use whatever editor you prefer.
Let’s get started by opening up Angular IDE, and creating a new project SimpleBoard.
kanban-new-project

kanban-board-sample-task-list

Taking a look at the Kanban board image above, we can identify two visual components, namely Lists and Cards, but a third component is not visible. To create a component, we right click on ‘app’ directory in ‘src’, select New > Component. Let us create BoardComponent.
kanban-board-component
Next, we edit the files created by Angular IDE as follows:

src/app/board/board.component.ts

/src/app/board/board.component.html

src/app/board/board.component.css

We need to add three more files:
src/app/cardschema.ts

src/app/cardstore.ts

src/app/listschema.ts

CardSchema is the class from which every card instance will be created, we use CardStore to maintain a collection of cards and it will be used as datastore of sort (in subsequent articles we will connect the kanban board to a backend), finally ListSchema is used to create instances of lists of cards. ListSchema has only two attributes, the name of the list which is a string and the cards in the list which is an array (it could be better represented by a linked list, but an array will do for now).

Next, we create ListComponent and CardComponent with the following content:

src/app/card/card.component.css

src/app/card/card.component.html

src/app/card/card.component.ts

src/app/list/list.component.css

src/app/list/list.component.html

src/app/list/list.component.ts

Code review

Now we have a working Kanban board.

kanban-board-cropped
So I’ll discuss some parts.

src/app/card/card.component.html

In src/app/card/card.component.html we set the draggable HTML attribute of the p element to true which makes it possible for us to drag and drop an HTML element. In HTML5, drag, and drop is part of the standard: Any element can be draggable.

Also, we call a method dragStart when the dragstart event is triggered on the p element.

src/app/card/card.component.ts

The DataTransfer object is used to hold the data that is being dragged during a drag and drop operation. It may hold one or more data items, each of one or more data types. This object is available from the dataTransfer property of all drag events. It cannot be created separately (i.e. there is no constructor for this object).

src/app/list/list.component.ts

On drop, we add a new node to the DOM.

Conclusion

In a follow-up article, we will connect our Kanban board to a Django backend for persistence.
Also, Read create a dashboard for an Ecommerce store with Angular 4.
Ready to use Angular IDE?