Overview of IntegralUI ListScroller for Angular

Created: 20 April 2018

IntegralUI ListScroller is a native Angular component that displays a scrollable item list in horizontal or vertical layout. Only one item is selectable at time that appears at center of the component. In this article, you will find detailed information on what features are included in the List Scroller component.

The above demo shows a list scroller component where items are positioned horizontally, displaying an icon. Using arrow buttons, you can navigate among the lists and select specific items. Selected item displays an icon and a title on bottom. By clicking on the check box, you can enable/disable the component.

You can also navigate between items in the list scroller using the mouse-wheel.

How to Use IntegralUI ListScroller in Angular

To use the List Scroller component you need to do the following:

In app template place the List Scroller component using the iui-listrscroller tag name

Set values for different properties available

Use the ngTemplate to create the content for each item, selected and normal

Connect the component to your data source using the items property

The items property accepts an array of objects that contain data related to each item. The item object can contain any custom fields, which you can use them to display data in the item template. In this example, we will use an icon and title on bottom for selected item only.

The bottom title appears outside the List Scroller component, and its value changes whenever selection changes. For this purpose a variable selectedItem is used to hold a reference to current selection and a handler for selectionChanged event is created.

Using the above properties, you can modify the List Scroller component and make it appear and function in a way best suited for your application.

Supported Events

Here is a list of available events:

afterSelect - occurs after item is selected

beforeSelect - occurs before item is selected

change - occurs when item order changes during sorting

clear - occurs when all items are removed from the ListBox

itemAdded - occurs when new item is added to the ListBox

itemAdding - occurs before item is added

itemRemoved - occurs when item is removed from the ListBox

itemRemoving - occurs before item is removed

scrollModeChanged - occurs when scrollMode property changes

scrollPosChanged - occurs when current scroll position changes

selectionChanged - occurs when currently selected item has changed

updateComplete - occurs when updating of component layout is completed

Whenever a new item is added to the list, the itemAdding followed by itemAdded events are fired. By handling these events you can intercept the add operation and if required cancel it within the itemAdding event.

In similar way, you can handle other events are add your code with custom actions. Liek in current example, when a different item is selected the bottom title is updated:

findItemByText - searches the list for an item using specified text value

refresh - updates the appearance of the component

removeItem - removes an item from the list

removeItemAt - removes an item at specified position from the list

resumeLayout - resumes and updates the component layout

sort - sorts the items in ascending or descending order

suspendLayout - suspends any change to the component layout

updateLayout - updates the component layout

updateView - updates the list

Using these methods, you can modify the structure of the List Scroller component from code.

How to Customize the List Scroller Appearance

Several CSS classes govern the appearance of the List Scroller component, located at the component css file. You can override these classes with your own, by adding new class names to the controlStyle property and set these classes in the CSS of your application. You only need to provide classes only for those parts of the component that you want to modify.

In addition, each item has a template where you can add any HTML element or other Angular components and arrange them in custom layouts. For example, instead of displaying only text or icon, each item can have a check box, buttons or any other element.

Conclusion

IntegralUI List Scroller component allows you to display scrollable item list in your Angular applications. You can use this component to present current selection in clear way to the user while allowing navigation between different list items. Using this component you can create multiple horizontal lists aligned vertically, which will allow selection of different items from different lists.

Newsletter

Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.

Name:

Email: *

*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.