How To Add Syncfusion Dropdowns In Angular 10 Application

Introduction

In this article, we will learn how to add Syncfusion dropdowns in the Angular 10 application.

Prerequisites

Create an Angular project by using the following command,

Open this project in Visual Studio Code and install Bootstrap by using the following command,

Now open the styles.css file and add Bootstrap file reference. To add a reference in the styles.css file add this line.

Now install the Syncfusion dropdown library, To install, use the following command,

Now import dropdown module in app.module.ts file, add the following code in this file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from "@angular/common/http";
import { AppComponent } from './app.component';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
import { CheckBoxAllModule } from '@syncfusion/ej2-angular-buttons';
import { DropdownDemoComponent } from './dropdown-demo/dropdown-demo.component';
@NgModule({
declarations: [
AppComponent,
DropdownDemoComponent
],
imports: [
BrowserModule,HttpClientModule,DropDownListAllModule,CheckBoxAllModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Now create a new component by using the following command,

Now open dropdown-demo.component.html file and add the following code,

<div class="container" style="margin-top:10px;margin-bottom: 24px;">
<div class="col-sm-12 btn btn-success">
How To Use Syncfusion Dropdown in Angular Application
</div>
</div>
<div class="col-lg-9 content-wrapper" style="height: 350px">
<div style="margin: 0px auto; width:250px; padding-top: 40px;">
<ejs-dropdownlist id='Cities' #sample [dataSource]='CityData' [value]='value' [fields]='fields' [placeholder]='waterMark' [popupHeight]='height'></ejs-dropdownlist>
</div>
</div>

Now open dropdown-demo.component.ts file and add the following lines,

Now open app.component.html file and add the following code,

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,

Now open multiselectdropdowns.component.html file and add the following code,

<div class="container" style="margin-top:10px;margin-bottom: 24px;">
<div class="col-sm-12 btn btn-success">
How To Use Syncfusion MultiSelect Dropdown in Angular Application
</div>
</div>
<div class="container" style="height: 150px">
<div id="multiselect-sample" class="control-section" style="height: 500px">
<div id='content'>
<div class="control-styles">
<h6>Select City</h6>
<ejs-multiselect id='sample-list1' [dataSource]='CityData' [mode]='default' [fields]='fields' [placeholder]='waterMark'></ejs-multiselect>
</div>
</div>
</div>
</div>
<div class="container" style="height: 350px">
<ejs-multiselect id='multiselect-checkbox' #checkbox [dataSource]='CityData' [placeholder]='checkWaterMark' [fields]='checkFields'
[mode]='mode' [popupHeight]='popHeight' [showDropDownIcon]='true' showSelectAll='true' [filterBarPlaceholder]='filterPlaceholder'></ejs-multiselect>
</div>

Now open multiselectdropdowns.component.tsfile and add the following code,

Now open app.module.ts file ,add the following code in this file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from "@angular/common/http";
import { AppComponent } from './app.component';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
import { CheckBoxAllModule } from '@syncfusion/ej2-angular-buttons';
import { DropdownDemoComponent } from './dropdown-demo/dropdown-demo.component';
import { AutoCompleteModule } from '@syncfusion/ej2-angular-dropdowns';
import { MultiSelectAllModule } from '@syncfusion/ej2-angular-dropdowns';
import { MultiselectdropdownsComponent } from './multiselectdropdowns/multiselectdropdowns.component';
@NgModule({
declarations: [
AppComponent,
DropdownDemoComponent,
MultiselectdropdownsComponent
],
imports: [
BrowserModule,HttpClientModule,DropDownListAllModule,CheckBoxAllModule,AutoCompleteModule,MultiSelectAllModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Now run the application using npm start and check the result.

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