Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Profile photo of Bob at Genuitec
Bob at Genuitec
Virtual evangelist at large. The face of Genuitec often appearing in graphics. Pen-name for our more shy writers of content.

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?

 

 

 

 

 

 

Related Posts

Creating Your First Angular 4 App Using Angular ID... Some time ago an article Creating My First Web App with Angular 2 in Eclipse was published. Since then, Angular was upgraded and became Angular 4, and new tooling for it in Webclipse appeared. Let’s see how creating a simple application using Angular 4 and new Angular tooling looks.PrerequisitesAngular IDE or Webclipse —We’ll do our development usi...
Creating Icons for Darkest Dark Theme. So you have come over to the dark side and now you are ready to make your development environment look even cooler. No matter if you are working with Angular, MyEclipse, Webclipse or Eclipse itself, you can create your own icons to fit your taste. Not only that, you can share your wealth with the community.To learn how to do this, check out this pa...
Slack Is Using TypeScript, and You Should Too! Building a desktop application with multiple threads is a challenge not everyone is up to. No problem for TypeScript, though! All the pieces must fit in perfectly to make sure an application doesn’t crash due to even a tiny mistake. For this reason, folks at Slack (and many others) have put their faith in it. How is this made possible? Felix Rieseb...
Software Delivery Evolving for You! Getting all the right software packages to the right teams is not your regular pizza delivery! Our Secure Delivery Center (SDC) has been making administrators’ lives easy by allowing them to provide end users with software, manage licenses, software updates, rollouts, and standardization -- all from one spot. Located behind your firewall, it has ho...

Posted on Jul 13th 2017