LIDOR SYSTEMS

Advanced User Interface Controls and Components

Overview of IntegralUI ComboBox for Angular 2

Created: 16 June 2016

Updated: 21 December 2016

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.

ComboBox component is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps

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.

How to Use IntegralUI ComboBox in Angular 2

The ComboBox component is simple to use. All component settings are done through HTML only, using various properties:

  • dropDownWidth - gets or sets the width of the dropdown list of a combo box
  • dropDownHeight - gets or sets the height of the dropdown list of a combo box
  • integralHeight - determines whether the dropdown list should resize to avoid showing partial items
  • items - holds a reference to the list of items defined in your application component
  • maxDropDownItems - determines the maximum number of items to be shown in the dropdown list
  • selectedIndex - specifies the index of the currently selected item

//

// 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;

// 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.

Supported Events

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:

  • dropDownClosed - occurs after dropdown window is closed
  • dropDownClosing - occurs before dropdown window starts to close
  • dropDownOpened - occurs after dropdown window is opened
  • dropDownOpening - occurs before dropdown window starts to open
  • selectedIndexChanged - occurs when selectedIndex property value has changed

Supported Methods

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:

  • closeDropDown - closes the dropdown window
  • openDropDown - opens the dropdown window

How to Customize the ComboBox Appearance

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.

Conclusion

This is a brief introduction to the IntegralUI ComboBox for Angular 2, showing only basic features. Currently this component is in BETA. The final release will include other features and more samples as a guideline of its use.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.