List

The <ch5-list> component is used to display a list of items within a page. The programmer provides a template to define each list item. The template uses an {{index}} moniker that will be substituted with the 0-based index of the list item.

For interactive examples using the <ch5-list> component and CSS classes, refer to the Showcase Application.

Features

The <ch5-list> attributes provide the following features:

  • Sets the number of list items (1 to 1000).
  • Sets the minimum and maximum height and width of the list.
  • Sets the orientation of the list (horizontal or vertical).
  • Sets the number of elements to be rendered outside of the visible area of the list.
  • Sets the height and width of individual list items.
  • Provides the name of the offset identifier to use when the index value changes.
  • Sets the swiping behavior when navigating through lists.
  • Determines whether lists are endless (first item follows last and last item precedes first for infinite swiping) or finite (first and last items are absolute ends of list).
  • Determines whether a scroll bar is used.
  • Sets the time to animate changing a list location when scrolling.
  • Resizes the list from the initial size via control system state.
  • Scrolls from to the first visible item of the list to the received 1-based offset value via control system state.

Design Considerations

When using multiple <p> tags as children of a <template> tag in a CH5 list (for example, <p>Item 1</p> and <p>Item 2</p>, only the first tagged item (<p>Item 1</p>) appears in the list. This occurs because the <template> tag considers one principle element only. Therefore, a single principle element is required, and the <p> tags can be set as children of this element.

Sample code:

Copy 
<ch5-list>
    <template>
        <div>
            <!--A principle element is required here -->
            <!-- Other tags -->
        </div>
    </template>
</ch5-list>

Standard-issue Angular uses {{ variable }} in HTML markup to allow the markup to display a value of the variable in the typescript/JavaScript. HTML5 UI also uses the double mustache {{ index }} as a counter in lists. However, Angular can be directed not to interpret the {{ }} and to leave them for interpretation by HTML UI via the ngNonBindable directive.

Refer to the sample code below from the Showcase Application as an example:

Copy 
<!--When using a computed property <b>{{ idx }}</b>, Angular tries to process it as an embedded expression, adding ngNonBindable to the template will force Angular to ignore it.-->

<ch5-list id="demo-list-1" size="500" maxHeight="400px" indexId="idx">
    <template ngNonBindable>
        <div class="horizontal-list-item">
            <span>item_{{idx}}</span>
        </div>
    </template>
</ch5-list>