Advanced User Interface Controls and Components
Created: 16 June 2016
Updated: 24 March 2017
IntegralUI ComboBox is a native Angular 2 component that replaces the standard <select> HTML element. It has advanced features like options to set the maximum number of visible items in dropdown window, the width and height of dropdown window and choosing item that is currently selected in the combo box. In this article, we will give detailed information on what features are included in ComboBox component.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
The demonstration above shows only the basic features available in ComboBox component. There are several items present in the combo box, some with icon and text and others only with a text. Opening or closing of dropdown list is accompanied with animations, built using only CSS.
The ComboBox component is simple to use. All component settings are done through HTML only, using various properties:
//
// main.ts file
//
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
//
// app.module.ts file
//
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { IntegralUIModule } from 'integralui/integralui.module';
@NgModule({
imports: [ BrowserModule, IntegralUIModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
//
// app.component.ts file
//
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'iui-app',
templateUrl: 'app.template.html',
styleUrls: ['combobox-overview.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
// An object that holds the items that are displayed in the combo box
public items: Array<any>;
// An object that holds property settings for the combo box
private comboOptions: any;
constructor(){
// Initialize the list shown in the combo box
this.items = [
{ id: 1, icon: "library", text: "Books" },
{ id: 2, icon: "empty", text: "Computers" },
{ id: 3, icon: "empty", text: "Electronics" },
{ id: 4, icon: "album", text: "Music" },
{ id: 5, icon: "software", text: "Software" },
{ id: 6, icon: "sports", text: "Sports" },
{ id: 7, icon: "empty", text: "Video Games" },
{ id: 8, icon: "clock", text: "Watches" }
];
// Initialize the combo box properties
this.comboOptions = {
dropDownWidth: 250,
dropDownHeight: 0,
integralHeight: true,
maxDropDownItems: 5,
selectedIndex: 3
}
}
}
// Run the application
bootstrap(AppComponent);
//
// app.template.html file
//
<div class="block">
<iui-combobox
[items]="items"
[dropDownWidth]="comboOptions.dropDownWidth"
[dropDownHeight]="comboOptions.dropDownHeight"
[integralHeight]="comboOptions.integralHeight"
[maxDropDownItems]="comboOptions.maxDropDownItems"
[selectedIndex]="comboOptions.selectedIndex">
<iui-item *ngFor="let item of items" [icon]="item.icon" [text]="item.text"></iui-item>
</iui-combobox>
</div>
<div class="control-panel">
<label><strong>ComboBox Properties:</strong> </label><br /><br />
<label style="margin-left:80px"><input type="checkbox" [(ngModel)]="comboOptions.integralHeight" /> Integral Height</label><br /><br />
<span>DropDown Width:</span> <input class="input-numeric" type="number" [(ngModel)]="comboOptions.dropDownWidth" min="0" />
<span>DropDown Height:</span> <input class="input-numeric" type="number" [(ngModel)]="comboOptions.dropDownHeight" min="0" />
<span>Max DropDown Items:</span> <input class="input-numeric" type="number" [(ngModel)]="comboOptions.maxDropDownItems" min="1" max="8" />
<span>Selected Index:</span> <input class="input-numeric" type="number" [(ngModel)]="comboOptions.selectedIndex" min="0" max="7" />
</div>
/*
combobox-overview.css file
*/
.block
{
float: left;
height: 250px;
width: 200px;
}
.control-panel
{
float: left;
margin-left: 75px;
padding-left: 20px;
width: 250px;
}
.control-panel span
{
display: inline-block;
text-align: right;
width: 150px;
}
.input-numeric
{
margin: 5px 0;
width: 50px;
}
.iui-combobox:hover, .iui-combobox:hover .iui-combobox-dropdown
{
border-color: #97c0e1;
}
.iui-combobox .iui-item
{
padding: 1px;
}
.iui-combobox-dropdown .iui-item
{
margin: 1px;
padding: 1px;
}
.iui-combobox .iui-item-icon
{
margin-top: -2px;
}
If you have few items present in the combo list, then you can add item to the ComboBox component directly in HTML, using the IntegralUIItem component. This component is represented by the <iui-item> tag, and you only need to specify the item icon and text. It can also act separate from the ComboBox, as a standalone component.
For larger data set, you can create an array in your app component and then apply it to the items property of the ComboBox component. In this example, we have an array of 8 items, each one with an id, icon and text.
Note In general, an item consists of an icon and text, but you can add any custom HTML elements as item content. However, the selected item shown in display area of the combo box will show only the item's icon and text.
Most of actions in ComboBox are accompanied by events. For example, whenever the dropdown window opens, the opening events are fired, or when an item from the list is selected, the selectedIndexChanged event is fired, etc.
Here is a list of available events:
In most cases, you will set the ComboBox with all items and their content from the start in HTML. However, sometimes you may need to change the whole content of the ComboBox dynamically. For example, you may have different sets of items that you want to display it in the same combo box. Depending on some custom conditions, you may need to display a specific data set, that differs from the original one.
For this purpose, you can change the data set by simply replacing the reference of the items property to point to new data set. Furthermore, using the built-in methods you can open or close the dropdown window from code:
//
// app.component.ts file
//
export class AppComponent {
// An object that holds the items that are displayed in the combo box
public items: Array
// The currently selected index in the combo box, default is -1
public comboSelectedIndex: number;
// Get a reference to the ComboBox component using a variable set in HTML
@ViewChild('combobox') combobox: IntegralUIComboBox;
// Define the arrays and a variable taht holds which array is currenty active
private data1: Array
private data2: Array
private activeList: number = 1;
constructor(){
// A reference to original data set
this.items = [];
// First dropdown list will show three items
this.data1 = [
{ id: 1, text: "Option 1" },
{ id: 2, text: "Option 2" },
{ id: 3, text: "Option 3" }
];
// First dropdown list will show five items
this.data2 = [
{ id: 1, text: "Item 1" },
{ id: 2, text: "Item 2" },
{ id: 3, text: "Item 3" },
{ id: 4, text: "Item 4" },
{ id: 5, text: "Item 5" }
];
}
switchCombo(){
// Switch the content of dropdown list from one data set to another
// Also, change the currently selected index
if (this.activeList == 1){
this.items = this.data1;
this.comboSelectedIndex = 1;
this.activeList = 2;
}
else {
this.items = this.data2;
this.comboSelectedIndex = 3;
this.activeList = 1;
}
// Manually open the drodown window
this.combobox.openDropDown();
}
}
//
// app.template.html file
//
<div class="block">
<iui-combobox #combobox [items]="items" [selectedIndex]="comboSelectedIndex">
<iui-item *ngFor="let item of items" [text]="item.text"></iui-item>
</iui-combobox>
<button (click)="switchCombo()">Switch</button>
</div>
In above code, we are two data sets. Whenever the button is clicked, the data in the combo box is switched and the currently selected index is changed so that display window in the combo box shows an item from the attached data set. Also, the dropdown window is opened from the code.
To access built-in methods, at first you need to get a reference to the ComboBox component. In HTML we are adding the #combobox variable, which is used to locate the ComboBox within your application component. After we have a reference to the ComboBox component, we can get access to all public methods available.
Here is a list of available methods:
Each part of the ComboBox is fully customizable. There are many CSS classes that governs the appearance of each part of the ComboBox, specified in a style sheet. By changing these classes in your code, you can modify the appearance of the ComboBox, partially or in full.
ComboBox appearance can be changed using a set of CSS classes for all parts, or a specific class for a specific part. For example, all combo box where even and odd items have a different background color. Additionally, you can set your own CSS classes in your app component, for custom HTML elements added in the item content.
To animate the opening and closing of the dropdown window, we are using a set of CSS classes. By overriding the attributes of these classes, you can change the way animations run. Further versions of this component will include options to add custom animations.
This is a brief introduction to the IntegralUI ComboBox for Angular 2, showing only basic features.
The ComboBox component is part of IntegralUI Web.