How to get started easily with Syncfusion Angular 11 List Box?

The article explains you how to create a simple angular 11 List Box component. A quick start project that helps you to create an Angular 11 List Box with a minimal code configuration.

Prerequisites 

Before start, we need following items to create Angular List Box in Angular 11 application.

• Node.js (latest version)
• Angular 11
• Angular CLI
• Visual Studio Code for Editor
• Typescript 4+

Dependencies

 The Angular 11 List Box is created from the Syncfusion ej2-angular-dropdowns package from npmjs, which are distributed in npm as @syncfusion scoped packages.

Creating Angular Project

• Install Angular CLI 11 using below command.

npm install -g @angular/cli@11.2.3 

Note:

If you would like to follow and run the application in Angular 6 or Angular 5 or Angular 4, you need to replace the CLI command version number with the corresponding angular version number.

npm install -g @angular/cli@<CLI VERSION>

• Create a new Angular 11 project using angular cli and navigate to the folder.

ng new angular11-app
cd angular11-app 

Adding Angular List Box

• After running the Angular 11 application successfully, configure the Angular List Box in this application. Install Angular List Box and EJ2 package using following command. 

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

• The --save command will instruct the NPM to include a List Box package inside the dependencies section of the package.json.

• Import list Box from installed package.

• Import and inject the other required modules within the providers section of app.module.ts.

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { ListBoxComponent } from '@syncfusion/ej2-angular-dropdowns';

import { AppComponent } from './app.component';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';

 

@NgModule({

  declarations: [

    AppComponent,

    ListBoxComponent,

    ButtonComponent

 

  ],

  imports: [

    BrowserModule,

    FormsModule,

    ReactiveFormsModule

 

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule {}

• Add the given below angular list box’s styles in styles.css.

  @import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";