Create a kanban board with Angular 4

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

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 Found here , though you can use whatever editor you prefer.
Let’s get started by opening up Angular IDE, and create a new project SimpleBoard.

Taking a look at the Kanban board image above we can identify two visual components namely lists and cards, a third component not visible is the board component. To create a component, we right click on ‘app’ directory in ‘src’, select New > Component. Let us create BoardComponent

Next, we edit the files created by Angular Ide as follows.


import { Component, OnInit } from '@angular/core';
import { CardStore } from '../CardStore';
import { ListSchema } from '../ListSchema';

  selector: 'app-board',
  templateUrl: './board.component.html',
  styleUrls: ['./board.component.css']
export class BoardComponent implements OnInit {
  cardStore: CardStore;
  lists: ListSchema[];
  constructor() { }
  setMockData(): void {
    this.cardStore = new CardStore();
    const lists: ListSchema[] = [
        name: 'To Do',
        cards: []
        name: 'Doing',
        cards: []
        name: 'Done',
        cards: []
    this.lists = lists;

  ngOnInit() {



< div>
  <app-list *ngFor="let list of lists" 
    ="list" [cardStore]="cardStore"></app-list> < /div>


    div {
        background: #ffffff;
        display: flex;
        padding: 0 5px;
        height: 100vh;
        overflow-x: scroll;

    We need to add three more files

    export class CardSchema {
      id: string;
      description: string;


    import {CardSchema} from './cardschema';
    export class CardStore {
      cards: Object = {};
      lastid = -1;
      _addCard(card: CardSchema) { = String(++this.lastid);[] = card;
        return (;
      getCard(cardId: string) {
      newCard(description: string): string {
       const card = new CardSchema();
       card.description = description;
       return (this._addCard(card));


    export class ListSchema {
      name: string;
      cards: string[];

    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 a 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


    p {
        background: white;
        margin: 0 0 6px 0;
        padding: 6px 6px 2px 8px;


    < p class="card" draggable="true" (dragstart)="dragStart($event)" id="{{}}">
    < /p>


    import { Component, Input, OnInit } from '@angular/core';
    import { CardSchema } from '../cardschema';
      selector: 'app-card',
      templateUrl: './card.component.html',
      styleUrls: ['./card.component.css']
    export class CardComponent implements OnInit {
      @Input() card: CardSchema;
      constructor() { }
      ngOnInit() {
      dragStart(ev) {


    .list {
        background: #e2e4e6;
        width: 258px;
        padding: 6px;
        margin: 5px;
        display: inline-block;
    .list__title {
        margin: 0;
        padding: 16px 0;
    .list a {
        width: 100%;
        display: block;
        text-decoration: none;
      width: 248px;
      padding: 5px;
      border: 2px solid orange;
      outline: 0;
      background: #fff;


    < div class="list" (dragover)="allowDrop($event)" (drop)="drop($event)">
        < p class="list__title"><strong>{{}}</strong></p>
        < div class="cards">
            <app-card *ngFor="let cardId of" [card]="cardStore.getCard(cardId)"></app-card>
        < /div>
        < input #addCardInput type="text" (keyup.enter)="onEnter(addCardInput.value); addCardInput.value=''; displayAddCard=false;" *ngIf="displayAddCard" autofocus>
        <a href="#" class="list__newcard" (click)="toggleDisplayAddCard();">Add a card...</a>
    </ div>


    import { Component, HostListener, Input, OnInit } from '@angular/core';
    import { CardSchema } from '../CardSchema';
    import { ListSchema } from '../ListSchema';
    import { CardStore } from '../CardStore';
      selector: 'app-list',
      templateUrl: './list.component.html',
      styleUrls: ['./list.component.css']
    export class ListComponent implements OnInit {
      @Input() list: ListSchema;
      @Input() cardStore: CardStore;
      displayAddCard = false;
      constructor() { }
      toggleDisplayAddCard() {
        this.displayAddCard = ! this.displayAddCard;
      ngOnInit(): void {
      allowDrop($event) {
      drop($event) {
        const data = $event.dataTransfer.getData('text');
        let target = $;
        const targetClassName = target.className;
        while( target.className !== 'list') {
          target = target.parentNode;
        target = target.querySelector('.cards');
        if(targetClassName === 'card') {
          $, $;
        } else if(targetClassName === 'list__title') {
          if (target.children.length) {
            target.insertBefore(document.getElementById(data), target.children[0]);
          }else {
        } else {
      onEnter(value: string) {
        const cardId =  this.cardStore.newCard(value);;

    Code review

    Now we have a working kanban board.

    kanban board

    so I’ll discuss some parts, please comment below if you want us to talk about anything else.


    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.


    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).


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


    I would like some questions and contributions so I am keeping it brief. In a followup article, we will connect our board to a Django backend for persistence. Do leave a reaction or comment below.

    Also, Read create a dashboard for an Ecommerce store with Angular 4.


    Pin It on Pinterest