Style and appearance in Angular List box component

27 Sep 20234 minutes to read

To modify the ListBox appearance, you need to override the default CSS of ListBox component. Please find the list of CSS classes and its corresponding section in ListBox component. Also, you have an option to create your own custom theme for the controls using our Theme Studio.

CSS Class	Purpose of Class
.e-listbox-wrapper	To customize the listbox wrapper
.e-list-parent .e-list-item	To customize the listbox list items
.e-list-parent .e-list-item:hover	To customize the listbox list items on hover
.e-list-parent .e-list-item.e-selected	To customize the listbox selected list item
.e-listboxtool-wrapper .e-listbox-tool	To customize the listbox toolbar
.e-listboxtool-wrapper .e-listbox-tool .e-btn	To customize the listbox toolbar button
.e-listboxtool-wrapper .e-listbox-tool .e-btn .e-btn-icon.e-icons::before	To customize the listbox toolbar icon

Horizontal ListBox

You can use cssClass property to display the Listbox horizontally.

app.component.ts

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: `<div class="e-section-control">
                <ejs-listbox [dataSource]='data' cssClass='e-horizontal-listbox'></ejs-listbox></div>`
})
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' }
];
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { ListBoxComponent, ListBoxAllModule } from '@syncfusion/ej2-angular-dropdowns';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule, ReactiveFormsModule, ListBoxAllModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);