The ListBox component for Angular represents a listbox widget that contains a list of selectable items.
npm install -g @angular/cli ng new jqwidgets-project cd jqwidgets-project
ng add jqwidgets-ng
jQWidgets UI for Angular is distributed as jqwidgets-ng NPM package
npm install jqwidgets-ng
@import 'jqwidgets-ng/jqwidgets/styles/jqx.base.css';
"styles": [ "node_modules/jqwidgets-ng/jqwidgets/styles/jqx.base.css" ]
<jqxListBox [theme]="'fluent'" #jqxListBox
[selectedIndex]="3"
[source]="source"
[width]="200"
[height]="250">
</jqxListBox>
import { Component, } from '@angular/core';
import { jqxListBoxModule, jqxListBoxComponent } from 'jqwidgets-ng/jqxlistbox';
@Component({
selector: 'app-root',
imports: [jqxListBoxModule],
standalone: true,
templateUrl: './app.component.html'
})
export class AppComponent {
source: string[] = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Café Bombón",
"Café au lait",
"Caffé Corretto",
"Café Crema",
"Caffé Latte",
"Caffé macchiato",
"Café mélange",
"Coffee milk",
"Cafe mocha",
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappé coffee",
"Iced Coffee",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
}