Angular Draggable Multi-select with checkbox

Angular Draggable Multi-select with checkbox

Overview

In this post, you will learn how to create a draggable multi-select with a checkbox in angular.

If you need only a multi-select option with a checkbox you can try the below plugins.

I have made some tweaks in ng-multi select-dropdown to make the options draggable

Objectives

  1. What is Angular?
  2. Creating a project in Angular
  3. Creating the multi-select dropdown component
  4. Integrating the dropdown component with a new component
  5. Adding the drag option using CDK layout

1. What is Angular?

Angular is an open-source front-end web framework for building client-side web applications using

  • HTML
  • CSS / SCSS
  • Typescript

2. Creating an Angular project

If you already know how to create an angular project you can skip this step.

Make sure your development environment includes Node.js and an npm package manager

Node.js

  • Angular requires Node.js version of 10.0.0 or higher
  • To check your version type node -v in a terminal
  • If the node is not installed check the installation steps from the link

NPM Package Manager

  • Angular, Angular CLI and Angular apps depend on features and functionality provided by libraries that are available as npm packages.
  • To download and install npm packages, you must have an npm package manager.
  • To install npm client click the link to know more
  • To check whether npm client installed run the command npm -v in a terminal

Install Angular CLI

Once the Node and npm installation are complete, we will install the Angular CLI.

Why I need Angular CLI

You use the Angular CLI to create projects, generate application and library code, and perform a variety of development tasks such as testing, bundling, and deployment

To install Angular CLI globally in your machine open the terminal and use the below command:

npm install -g [@angular/cli](twitter.com/angular/cli "Twitter profile for @angular/cli")

Now we will create an angular project, create a workspace. Open the terminal and use the below command:

ng new project-name

The ng new command prompts you for information about features to include in the initial app. Accept the defaults by pressing the Enter or Return key.

The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes.

The CLI creates a new workspace and a simple app, ready to run.

Run the application

Navigate to the project with the below command in the terminal:

cd project-name
ng serve -o

We have completed the installation and creation of a new angular project.

3. Creating the multi-select dropdown component

Now we will create the dropdown component. Inside your project navigate to the src/app directory and then

create a new directory named shared Inside the shared directory create another two directories namely components and directives.

Now your project structure will be like below

Project structure

Navigate to the components folder and generate a component named multi-select using the below command:

ng g component multi-select

Now the multi-select component will be created navigate to the multi-select.component.html and add the below code

In the above code, we are displaying the placeholder, input box of the type checkbox, and a search box to filter the list.

Now open the multi-select.component.ts file and add the below code:

In the component file, we have the logic of listing the items, clicking the items, removing the selected item, opening/closing the dropdown, and the list of remaining items in the list.

You might see some errors in the components and the HTML file because of the filters and the models.

Create a new file named multi-select.model.ts and copy the below code:

Open multi-select.scss and copy the below code:

Create a new file named list-filter.pipe.ts and copy the below code:

Open the directives folder and create a new file named click-outside.directive.ts and copy the below code:

In the directive, we have written the logic to close the dropdown when we click outside.

We have written the component now we will use this component in our example.

Open app.component.html and clear all the codes and add the below code:

Open app.component.ts and add the below code:

In app.module.ts make sure to import the multiSelectComponent and the FormsModule since we are using the ngModel:

If you run the code you will get the output like below

We have created the multi-select with checkbox

5. Adding the drag option using CDK layout

Now we will install the CDK Layout using the below command

npm i @angular/cdk

Open the app.module.ts and import the DragModule like below:

Now open multi-select.component.html and add the cdkDropList and cdkDropListDropped event like below:

Now if you run the project you will see the output like below

References

[nidhinkumar06/AngularMultiselectcheckbox
This project was generated with Angular CLI version 8.3.20. Run ng serve for a dev server. Navigate to…github.com](https://github.com/nidhinkumar06/AngularMultiselectcheckbox "github.com/nidhinkumar06/AngularMultiselect..")

Congratulations!

You have learned how to create a draggable multi-select component in angular.

Happy Learning :)