Introduction

In this article, we will learn how to add Syncfusion dropdowns in the Angular 10 application.
Prerequisites
  • Basic Knowledge of Angular 2 or higher
  • Visual Studio Code
  • Node and NPM installed
  • Bootstrap

Create an Angular Project

Create an Angular project by using the following command,
  1. ng new Kanbandata
Open this project in Visual Studio Code and install Bootstrap by using the following command,
  1. npm install bootstrap --save
Now open the styles.css file and add Bootstrap file reference. To add a reference in the styles.css file add this line.
  1. @import '~bootstrap/dist/css/bootstrap.min.css';
Now install the Syncfusion dropdown library, To install, use the following command,
  1. npm install @syncfusion/ej2-angular-dropdowns
Now import dropdown module in app.module.ts file, add the following code in this file.
  1. import { NgModule } from '@angular/core';
  2. import { BrowserModule } from '@angular/platform-browser';
  3. import { HttpClientModule } from "@angular/common/http";
  4. import { AppComponent } from './app.component';
  5. import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
  6. import { CheckBoxAllModule } from '@syncfusion/ej2-angular-buttons';
  7. import { DropdownDemoComponent } from './dropdown-demo/dropdown-demo.component';
  9. @NgModule({
  10. declarations: [
  11. AppComponent,
  12. DropdownDemoComponent
  13. ],
  14. imports: [
  15. BrowserModule,HttpClientModule,DropDownListAllModule,CheckBoxAllModule
  16. ],
  17. providers: [],
  18. bootstrap: [AppComponent]
  19. })
  20. export class AppModule { }
Now create a new component by using the following command,
  1. ng g c dropdowndemo
Now open dropdown-demo.component.html file and add the following code,
  1. <div class="container" style="margin-top:10px;margin-bottom: 24px;">
  2. <div class="col-sm-12 btn btn-success">
  3. How To Use Syncfusion Dropdown in Angular Application
  4. </div>
  5. </div>
  6. <div class="col-lg-9 content-wrapper" style="height: 350px">
  7. <div style="margin: 0px auto; width:250px; padding-top: 40px;">
  8. <ejs-dropdownlist id='Cities' #sample [dataSource]='CityData' [value]='value' [fields]='fields' [placeholder]='waterMark' [popupHeight]='height'></ejs-dropdownlist>
  9. </div>
  10. </div>
Now open dropdown-demo.component.ts file and add the following lines,
  1. import { Component,ViewChild, OnInit } from '@angular/core';
  2. import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';
  3. @Component({
  4. selector: 'app-dropdown-demo',
  5. templateUrl: './dropdown-demo.component.html',
  6. styleUrls: ['./dropdown-demo.component.css']
  7. })
  8. export class DropdownDemoComponent implements OnInit {
  10. constructor() { }
  11. public listObj: DropDownListComponent;
  13. public CityData: Object[] = [
  14. { Id: '1', City: 'Jaipur' },
  15. { Id: '2', City: 'Delhi' },
  16. { Id: '3', City: 'Noida' },
  17. { Id: '4', City: 'Gurgoan' },
  18. { Id: '5', City: 'Pune' },
  19. { Id: '6', City: 'Mumbai' },
  20. { Id: '7', City: 'Ajmer' },
  21. { Id: '8', City: 'Bangalore' },
  22. { Id: '9', City: 'Hyderabad' },
  23. { Id: '10', City: 'Vizag' }
  24. ];
  25. ngOnInit(): void {
  26. }
  27. public fields: Object = { text: 'City', value: 'Id' };
  28. public height: string = '220px';
  29. public waterMark: string = 'Select a City';
  30. public value: string = '3';
  32. }
Now open app.component.html file and add the following code,
  1. <app-dropdown-demo></app-dropdown-demo>
Now run the application using npm start and check the result.
Now we add a Multiselect dropdown. Let's create a new component by using the following command,
  1. ng g c multi-select dropdowns
Now open multiselectdropdowns.component.html file and add the following code,
  1. <div class="container" style="margin-top:10px;margin-bottom: 24px;">
  2. <div class="col-sm-12 btn btn-success">
  3. How To Use Syncfusion MultiSelect Dropdown in Angular Application
  4. </div>
  5. </div>
  6. <div class="container" style="height: 150px">
  7. <div id="multiselect-sample" class="control-section" style="height: 500px">
  9. <div id='content'>
  10. <div class="control-styles">
  11. <h6>Select City</h6>
  12. <ejs-multiselect id='sample-list1' [dataSource]='CityData' [mode]='default' [fields]='fields' [placeholder]='waterMark'></ejs-multiselect>
  13. </div>
  14. </div>
  15. </div>
  16. </div>
  17. <div class="container" style="height: 350px">
  18. <ejs-multiselect id='multiselect-checkbox' #checkbox [dataSource]='CityData' [placeholder]='checkWaterMark' [fields]='checkFields'
  19. [mode]='mode' [popupHeight]='popHeight' [showDropDownIcon]='true' showSelectAll='true' [filterBarPlaceholder]='filterPlaceholder'></ejs-multiselect>
  20. </div>
Now open multiselectdropdowns.component.tsfile and add the following code,
  1. import { Component,ViewChild, OnInit } from '@angular/core';
  2. import { CheckBoxComponent } from '@syncfusion/ej2-angular-buttons';
  3. import { MultiSelectComponent } from '@syncfusion/ej2-angular-dropdowns';
  5. @Component({
  6. selector: 'app-multiselectdropdowns',
  7. templateUrl: './multiselectdropdowns.component.html',
  8. styleUrls: ['./multiselectdropdowns.component.css']
  9. })
  10. export class MultiselectdropdownsComponent implements OnInit {
  11. mode: string;
  12. filterPlaceholder: string;
  13. constructor() { }
  14. @ViewChild('sample')
  15. public listObj: MultiSelectComponent;
  16. public CityData: Object[] = [
  17. { Id: '1', City: 'Jaipur' },
  18. { Id: '2', City: 'Delhi' },
  19. { Id: '3', City: 'Noida' },
  20. { Id: '4', City: 'Gurgoan' },
  21. { Id: '5', City: 'Pune' },
  22. { Id: '6', City: 'Mumbai' },
  23. { Id: '7', City: 'Ajmer' },
  24. { Id: '8', City: 'Bangalore' },
  25. { Id: '9', City: 'Hyderabad' },
  26. { Id: '10', City: 'Vizag' }
  27. ];
  28. public fields: Object = { text: 'City', value: 'Id' };
  29. public waterMark: string = 'Choose Cities';
  30. public default : string = 'Default';
  31. public box : string = 'Box';
  32. public delimiter : string = 'Delimiter';
  33. public checkWaterMark: string = 'Select City';
  34. public checkFields: Object = { text: 'City', value: 'Id' };
  35. public popHeight: string = '350px';
  36. ngOnInit(): void {
  37. this.mode = 'CheckBox';
  38. this.filterPlaceholder = 'Search city';
  39. }
  40. }
Now open app.module.ts file ,add the following code in this file.
  1. import { NgModule } from '@angular/core';
  2. import { BrowserModule } from '@angular/platform-browser';
  3. import { HttpClientModule } from "@angular/common/http";
  4. import { AppComponent } from './app.component';
  5. import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
  6. import { CheckBoxAllModule } from '@syncfusion/ej2-angular-buttons';
  7. import { DropdownDemoComponent } from './dropdown-demo/dropdown-demo.component';
  8. import { AutoCompleteModule } from '@syncfusion/ej2-angular-dropdowns';
  9. import { MultiSelectAllModule } from '@syncfusion/ej2-angular-dropdowns';
  10. import { MultiselectdropdownsComponent } from './multiselectdropdowns/multiselectdropdowns.component';
  12. @NgModule({
  13. declarations: [
  14. AppComponent,
  15. DropdownDemoComponent,
  16. MultiselectdropdownsComponent
  17. ],
  18. imports: [
  19. BrowserModule,HttpClientModule,DropDownListAllModule,CheckBoxAllModule,AutoCompleteModule,MultiSelectAllModule
  20. ],
  21. providers: [],
  22. bootstrap: [AppComponent]
  23. })
  24. export class AppModule { }
Now run the application using npm start and check the result.

Summary

In this article, we learned how to add Syncfusion dropdowns in an Angular 10 Application.