This section briefly explains how to create a simple ListBox component and configure its available functionalities in Angular.
The following list of dependencies are required to use the ListBox component in your application.
|-- @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-navigations
|-- @syncfusion/ej2-popups
|-- @syncfusion/ej2-buttonsYou can use Angular CLI to setup your Angular applications. To install Angular CLI use the following command.
npm install -g @angular/cliStart a new Angular application using below Angular CLI command.
ng new my-app
cd my-appTo install ListBox package, use the following command.
npm install @syncfusion/ej2-angular-dropdowns --saveThe above package installs ListBox dependencies which are required to render the component in the Angular environment.
Import ListBox module into Angular application(app.module.ts) from the package
@syncfusion/ej2-angular-dropdowns.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the ListBoxModule for the ListBox component
import { ListBoxModule } from '@syncfusion/ej2-angular-dropdowns';
import { AppComponent } from './app.component';
@NgModule({
//declaration of ej2-angular-dropdowns module into NgModule
imports: [ BrowserModule, ListBoxModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }Modify the template in app.component.ts file to render the Button module.
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-root',
// specifies the template string for the ListBox component
template: `<ejs-listbox></ejs-listbox>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent { }Add Button component’s styles as given below in style.css.
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';After initialization, populate the ListBox with data using the dataSource property.
Here, an array of object is passed to the ListBox component.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
// specifies the template string for the ListBox component
template: `<ejs-listbox [dataSource]='data'></ejs-listbox>`
})
export class AppComponent {
constructor() {
}
// defined the array of object
public data: { [key: string]: Object }[] = [
{ text: 'Hennessey Venom', id: 'list-01' },
{ text: 'Bugatti Chiron', id: 'list-02' },
{ text: 'Bugatti Veyron Super Sport', id: 'list-03' },
{ text: 'SSC Ultimate Aero', id: 'list-04' },
{ text: 'Koenigsegg CCR', id: 'list-05' },
{ text: 'McLaren F1', id: 'list-06' },
{ text: 'Aston Martin One- 77', id: 'list-07' },
{ text: 'Jaguar XJ220', id: 'list-08' },
{ text: 'McLaren P1', id: 'list-09' },
{ text: 'Ferrari LaFerrari', id: 'list-10' },
];
}After completing the configuration required to render a basic ListBox, run the following command to display the output in your default browser.
ng serveThe following example illustrates the output in your browser.
import { Component } from '@angular/core';
import { ListBoxComponent } from '@syncfusion/ej2-angular-dropdowns';
@Component({
selector: 'app-container',
// specifies the template string for the ListBox component with dataSource
template: `<ejs-listbox [dataSource]='data'></ejs-listbox>`
})
export class AppComponent {
// defined the array of object
public data: { [key: string]: Object }[] = [
{ text: 'Hennessey Venom', id: 'list-01' },
{ text: 'Bugatti Chiron', id: 'list-02' },
{ text: 'Bugatti Veyron Super Sport', id: 'list-03' },
{ text: 'SSC Ultimate Aero', id: 'list-04' },
{ text: 'Koenigsegg CCR', id: 'list-05' },
{ text: 'McLaren F1', id: 'list-06' },
{ text: 'Aston Martin One- 77', id: 'list-07' },
{ text: 'Jaguar XJ220', id: 'list-08' },
{ text: 'McLaren P1', id: 'list-09' },
{ text: 'Ferrari LaFerrari', id: 'list-10' }
];
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { ListBoxComponent } from '@syncfusion/ej2-angular-dropdowns';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,FormsModule, ReactiveFormsModule
],
declarations: [AppComponent, ListBoxComponent, ButtonComponent],
bootstrap: [AppComponent]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);