Getting started with Angular Kanban
For better product delivery in any organization, there is a planning system in place which tracks the growth of products or business needs. For any product to thrive, the success depends on demand, but in a situation where the supply time is more and demand time is less, we need to quickly respond to observed demand. This is where the Kanban system is used. It is used as the demand signal is immediately addressed in the supply chain.
Kanban is a Japanese term, which means a signboard. It is basically a scheduling system for lean and just-in-time manufacturing. Kanban Board is a tool which helps in organizing and implementing the Kanban to manage or implement work at personal and organization level. It is represented as rows and columns, a card is used at various stages which represent work items. Rows or “swimlanes” represents kind of work and columns represent the stage.
There are multiple tools and resources to create and use Kanban boards , this article will focus on how to create a Kanban board using jqWidget Kanban component for Angular platform. Angular is used in an enterprise-class application and uses Model-View-Whatever (MVW) framework. Using jqWidgets framework a Kanban component we can make real difference in our product and can easily add additional features.
Intergration:
We will see how to integrate Angular with jqWidgets. We need the latest node.js (8.9v or greater) to install the Vue CLI. Check the node version by node –v else you can upgrade the node version with npm install npm@latest –g.
This article we will see how to create an Angular project using CLI. To install Angular CLI using npm, type the below command in the terminal/console.
Create a dedicated folder for this project and create an Angular CLI application, by using below command.
It creates a workspace folder named “jq-widgets-angular-cli-app. A folder structure is created where the application skeleton is in “src/ folder”. A new application contains source files for root modules, with root components and template. Folder structure may vary according to the projects.
Use the below command to install, jqWidgets dependencies.
Now we have an Angular CLI working app. Now we will start integrating jqWidgets framework with angular.We need to include style property of jqWidgets in angular.json file.
Now we will add below lines at the bottom of tsconfig.json file
Kanban Board Using jqWidgets for Angular:
We will start by modifying the Kanban component “app.component.ts” file. It requires below inputs
Now mark a class as a component by adding component decorator.
We can use @Component decorator properties like selectors, styles, templateUrls, etc. Now we will create AppComponent class in “app.component.ts” file. This class initiates the app. We can also use @ViewChild and ngAfterViewInit.
@ViewChild is used to make a reference using selectors, queries are set before ngAfterViewinit callback is called. ngAfterViewInit is lifecycle method where angular components are created. Kanban is available only after view is initialized.
Now we will set the Kanban components. First, we will set the fields for creating Kanban.
Next, we will create a local source and add to dataadapter.
We will create a function for resourcesAdapterFunc,
Next we will create Columns for KanbanOne and render them.
Next we will define the SplitterPanels.
Now, we will create components that accept JSON object with initialization properties.
Now, we can modify app.module.ts file, by adding in the @NgModule.
Next, we will set to </jqxSplitter> to display the Kanban on Page.
Now we are all set to display the application using app.html or index.html page. Check out the references used. The application will be displayed in a </app-root> tag.
After running the application we will get the below Kanban board.
Additional features:
Angular Kanban is very flexible due to its additional features. We can move the components by drag and drop along from one stage to another. We can set colors and create a header template for each and every Kanban component. This component has a certain color set. It allows creating Item template where only the title of component or name is colored. Along with this we can edit, add, update and remove items, can edit Kanban events and have fluid size and right to left layouts.
Summary:
Kanban is a necessary tool for any progressive organization. It is light weighted and uses a lean method. jqWidget has easily implementable and flexible Kanban component which can help clients to track their progress and backlogs during their scheduled time. We can also have multiple Kanban on one screen to track the changes needed.
