How to get started easily with Syncfusion Angular 8 Bootstrap Dropdown List?

2 mins read

A quick start project that helps you to create an Angular 8 Bootstrap DropDownList component with a minimal code configuration.

Angular 8 Bootstrap DropDownList

The following section explains the steps required to create a simple Angular 8 Bootstrap DropDownList component.

Prerequisites

Make sure that you have the compatible versions of Angular in your machine before starting to work on this project.

Node.js
Angular 8+
Angular CLI
TypeScript 2.6+
Visual Studio code for editor

Introduction

The Angular 8 Bootstrap DropDownList used in this project is created from the Syncfusion ej2-angular-dropdowns package. You can simply define it as <ejs-dropdownlist> within the template.

Dependencies

Before starting with this project, the Angular 8 Bootstrap DropDownList requires to add the Syncfusion ej2-angular-dropdowns package from npmjs, which is distributed in npm as @syncfusion scoped packages. DropDownList requires the following dependent packages for rendering the DropDownList component.

|-- @syncfusion/ej2-angular-dropdowns
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-angular-base
    |-- @syncfusion/ej2-dropdowns
        |-- @syncfusion/ej2-lists
        |-- @syncfusion/ej2-inputs
        |-- @syncfusion/ej2-popups
            |-- @syncfusion/ej2-buttons

The following CSS styles require dependencies to render the DropDownList component in bootstrap theme.

@import '../node_modules/@syncfusion/ej2-base/styles/bootstrap.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/bootstrap.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/bootstrap.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/bootstrap.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/bootstrap.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/bootstrap.css';
@import '../node_modules/@syncfusion/ej2-angular-dropdowns/styles/bootstrap.css';

Creating Angular project

To create the Angular project using the Angular CLI tool, follow the given steps. Install Angular CLI 8 using following command.

npm install @angular/cli@8.3.19

Now, create a new Angular project by using the command ng new and navigate to that folder.

ng new <project name>
cd <project name>

Install the ej2-angular-dropdowns package through the npm install command.

npm install @syncfusion/ej2-angular-dropdowns --save

Adding Angular 8 Bootstrap DropDownList

You can add the Angular 8 DropDownList component by using the ejs-dropdownlist directive and the attributes within the tag allows you to define other functionalities. Import the DropDownList module into the Angular application (app.module.ts) from the ej2-angular-dropdowns package.

import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
 //Import the DropDownListModule for the DropDownList component
 import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
 import { AppCompnent } from './app.component';
 
@NgModule({ 
    imports: [ BrowserModule, DropDownListModule],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
})
 
export class AppModule {}

Define the Angular DropDownList code within the app.component.html file mapped against the templateUrl option in app.component.ts file.

Here, the DropDownList component is rendered with the dataSource property.

[app.component.ts]

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  //Define the JSON of data
     public countries: { [key: string]: Object; }[] = [
            { Name: 'Australia', Code: 'AU' },
            { Name: 'Bermuda', Code: 'BM' },
            { Name: 'Canada', Code: 'CA' },
            { Name: 'Cameroon', Code: 'CM' },
            { Name: 'Denmark', Code: 'DK' },
            { Name: 'France', Code: 'FR' },
            { Name: 'Finland', Code: 'FI' },
            { Name: 'Germany', Code: 'DE' }, 
        ];
        //Maps the local data column to fields property
        public fields: Object = { text: 'Name', value: 'Code' };
        //Set the placeholder to Dropdown List input element
        public waterMark: string = 'Select countries';
 }

[app.component.html]

 <ejs-dropdownlist id='localData' #local [dataSource]='countries' [fields]='fields' [placeholder]='waterMark'></ejs-dropdownlist >

Refer to the CDN link of CSS reference within the styles.css file.

@import '../node_modules/@syncfusion/ej2-base/styles/bootstrap.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/bootstrap.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/bootstrap.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/bootstrap.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/bootstrap.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/bootstrap.css';
@import '../node_modules/@syncfusion/ej2-angular-dropdowns/styles/bootstrap.css';

Run the application with the command ng serve and a DropDownList with bootstrap theme will be displayed on the browser as follows.

Angular 8 DropDownList

Also, you can download and run the sample in this GitHub Repository. For more information about DropDownList functionalities, refer to UG Documentation, API Reference, Feature Tour and Samples section.

Did you find this information helpful?

Yes

Comments (0)