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](http://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
Github Link
[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 "https://github.com/nidhinkumar06/AngularMultiselectcheckbox")
