Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
69
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Purchase

List

List displays a vertical group of related rows: settings, files, messages, activity, compact collections, simple navigation rows, or selectable options.

Use the row slots for consistent structure: icon or avatar on the left, title and secondary lines in the center, and metadata or actions on the right.

Use ngs-selection-list with ngs-list-option when users choose one or more rows. Use ngs-nav-list for simple navigation lists, and ngs-action-list for vertical action groups that are not dropdown menus.

Do not use List for large tabular data, columns, sorting, pagination, or bulk operations; use Table or DataView. Do not use it for trigger-based dropdown actions; use Menu. Do not use it as a generic layout container.

ngs-list / ngs-nav-list / ngs-action-list

PropTypeDefault
disabled
Whether the list is disabled
booleanfalse
disableRipple
Whether ripples are disabled
booleanfalse

ngs-list-item

PropTypeDefault
disabled
Whether the list item is disabled
booleanfalse
lines
Number of lines of text to display
numbernull
disableRipple
Whether ripples are disabled for this item
booleanfalse

ngs-selection-list

PropTypeDefault
multiple
Whether the selection list allows multiple selection
booleanfalse
disabled
Whether the selection list is disabled
booleanfalse
EventDescription
selectionChangeEvent emitted when the selection changes

ngs-list-option

PropTypeDefault
selected
Whether the option is selected
booleanfalse
value
The value associated with the option
anyundefined
disabled
Whether the option is disabled
booleanfalse
EventDescription
selectedChangeEvent emitted when the option selection state changes