The DropDownList component for Angular contains a list of selectable items displayed in a drop-down.
npm install -g @angular/cli ng new jqwidgets-project cd jqwidgets-project
ng add jqwidgets-ngAlternatively, you can use the standard installation (Manual Setup)
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" ]
<jqxDropDownList [theme]="'fluent'"
[width]="200" [height]="30" [source]="source" [selectedIndex]="1">
</jqxDropDownList>
import { Component } from '@angular/core';
import { jqxDropDownListModule, jqxDropDownListComponent } from 'jqwidgets-ng/jqxdropdownlist';
@Component({
selector: 'app-root',
imports: [jqxDropDownListModule],
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'
];
}