LIDOR SYSTEMS

Advanced User Interface Controls and Components

Selection Options in ListBox for Angular 2

Created: 10 April 2017

IntegralUI ListBox component comes with four selection options that allows you to select one or multiple items, using mouse and/or keyboard keys. This article provides details on each option available.

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

If you have any questions, don't hesitate to contact us at support@lidorsystems.com

From control panel in above demo, you can choose how to select items. The following options are available:

  • None - disables selection
  • One - you can select only one item
  • Multi-Simple - you can select multiple items using mouse click
  • Multi-Extended - you can select multiple items using mouse and keyboard SHIFT or CTRL key

The list on right shows the items are currently selected.

// 
// app.module.ts
//

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { IntegralUIModule } from './integralui/integralui.module';

import { AppComponent }   from './app.component';

@NgModule({
    imports:      [ 
          BrowserModule, 
          FormsModule, 
          IntegralUIModule
    ],
    declarations: [ 
        AppComponent, 
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

// 
// app.component.ts
//

import { Component, ViewContainerRef, ViewChild, ViewEncapsulation } from '@angular/core';
import { IntegralUIListBox} from '../../integralui/components/integralui.listbox';
import { IntegralUISelectionMode } from '../../integralui/components/integralui.core';

@Component({
    selector: 'iui-app',
    templateUrl: 'app.template.html',
    styleUrls: ['sample-styles.css'],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    // Get a reference of the ListBox component on the left
    @ViewChild('listbox') listbox: IntegralUIListBox;

    // An array that holds all options in the comboo box
    private comboItems: Array<any>;
    // An array that holds a list of items in the ListBox on the right
    private items: Array<any>;
    // An array that holds a list of all selected items
    private selItems: Array<any>;
    // Current selection mode is set to single selection
    private selMode: IntegralUISelectionMode = IntegralUISelectionMode.One;

    constructor(){
        // Options to choose from
        this.comboItems = [
          { text: "None" },
          { text: "One" },
          { text: "Multi Simple" },
          { text: "Multi Extended" }
        ];

        // Create a list of items
        this.items = [
          { text: "Inception" },
          { text: "Gravity" },
          { text: "Django Unchained" },
          { text: "Toy Story 3" },
          { text: "The Wolf of Wall Street" },
          { text: "The Town" },
          { text: "Nightcrawler" },
          { text: "Locke" },
          { text: "Prometheus" },
          { text: "The Social Network" },
          { text: "The Conjuring" },
          { text: "Blue Jasmine" },
          { text: "Black Swan" },
          { text: "Prisoners" },
          { text: "The Avengers" },
          { text: "Snowpiercer" },
          { text: "The Dark Knight Rises" },
          { text: "American Hustle" },
          { text: "Dawn of the Planet of the Apes" },
          { text: "Frozen" },
          { text: "Edge of Tomorrow" },
          { text: "Interstellar" },
          { text: "Rush" },
          { text: "Shutter Island" },
          { text: "This Is the End" }
        ];

        // At first there are no selected items
        this.selItems = [];
    } 

    onComboSelectionChanged(e: any){
        // Whenever an option is selected, update the selection mode of the ListBox
        switch (e.index){
          case 0:
            this.selMode = IntegralUISelectionMode.None;
            break;

          case 2:
            this.selMode = IntegralUISelectionMode.MultiSimple;
            break;

          case 3:
            this.selMode = IntegralUISelectionMode.MultiExtended;
            break;

          default:
            this.selMode = IntegralUISelectionMode.One;
            break;
        }
    } 

    onSelectionChanged(e: any){
      // Get the list of currently selected items and display it in the ListBox on the right
      this.selItems = this.listbox.getList('selected');
    }

}
                            
// 
// app.template.html
//

<div style="float:left">
  <div style="float:right">
    <span style="display:inline-block;padding:10px 5px 5px 0;">Selection Mode: </span>
    <iui-combobox [items]="comboItems" [maxDropDownItems]="4" [integralHeight]="true" [selectedIndex]="1" (selectedIndexChanged)="onComboSelectionChanged($event)">
      <iui-item *ngFor="let item of comboItems" [text]="item.text"></iui-item>
    </iui-combobox>
  </div>
  <iui-listbox #listbox [items]="items" [selectionMode]="selMode" (selectionChanged)="onSelectionChanged($event)">
      <iui-listitem *ngFor="let item of items">  
          <div class="item-label">{{item.text}}</div>
      </iui-listitem>
  </iui-listbox>
</div>
<div style="float:left;margin-left:30px;">
  <div style="padding:10px 0 5px 0;">Selected Items:</div>
  <iui-listbox [items]="selItems">
      <iui-listitem *ngFor="let item of selItems">  
          <div class="item-label">{{item.text}}</div>
      </iui-listitem>
  </iui-listbox>
</div>

                            
/*
* sample-styles.css
*/ 

.iui-combobox
{
  display: inline-block;
  float: right;
  width: 200px;
}
.iui-listbox
{
  width: 400px;
  height: 400px;
}
.item-label
{
  padding: 5px;
}
                            

Single Selection

By default, you can select only one item. Whenever a mouse button is clicked over some item in the ListBox, the item will become selected.

During selection, various events are fired in following order:

  1. beforeSelect - fired before item is selected
  2. afterSelect - fired after item is selected
  3. selectionChanged - fired when currently selected item has changed

By handling these events in your code, you can alter the selection process. For example, we can handle the selectionChanged event and display all items that are currently selected:


onSelectionChanged(e: any){
  // Get the list of currently selected items and display it in the ListBox on the right
  this.selItems = this.listbox.getList('selected');
}
                            

<iui-listbox #listbox [items]="items" [selectionMode]="selMode" (selectionChanged)="onSelectionChanged($event)">
      <iui-listitem *ngFor="let item of items">  
          <div class="item-label">{{item.text}}</div>
      </iui-listitem>
  </iui-listbox>
</div>

                            

How to Select Multiple items

When selectionMode property value is set to either Multi-Simple or Multi-Extended, you can select multiple items. The difference between these modes is that with Multi-Simple selection mode, you don't have to use a keyboard to select items. Selection is done by simply clicking on an item.

On the other hand, with Multi-Extended mode in order to select multiple items, you must press and hold either the CTRL or SHIFT key.

Using the CTRL key, you can change the selected state of an item to true or false, and select items in random order. The SHIFT key allows you to select all items from the first to the last one that is clicked.

Manually Select items

In some cases, you may need to select multiple items from code. For this purpose is best to use the selectItems method. You need to create a list of items that you want to select, and then apply it, like this:


let list: Array<any> = [];

list.push(this.items[1]);
list.push(this.items[2]);
list.push(this.items[4]);

this.listbox.selectItems(list);
                            

Conclusion

You can have single or multiple selected items in ListBox component for Angular 2. The selection is accompanied with events that you can handle in your code and add custom behavior. When required, you can also select multiple items manually from code.

The ListBox component is part of IntegralUI Web.

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.