Sets/gets whether the left panning of an item is allowed.
Default value is false.
<igx-list [allowLeftPanning]="true"></igx-list>
let isLeftPanningAllowed = this.list.allowLeftPanning;
Sets/gets whether the right panning of an item is allowed.
Default value is false.
<igx-list [allowRightPanning]="true"></igx-list>
let isRightPanningAllowed = this.list.allowRightPanning;
Returns a collection of all items and headers in the list.
let listChildren: QueryList = this.list.children;
Sets/gets the list loading template.
This template is used by IgxList in case there are no list items defined and isLoading is set to true.
<igx-list>
<ng-template igxDataLoading>
<p>Patience, we are currently loading your data...</p>
</ng-template>
</igx-list>
let loadingTemplate = this.list.dataLoadingTemplate;
Sets/gets the empty list template.
This template is used by IgxList in case there are no list items
defined and isLoading is set to false.
<igx-list>
<ng-template igxEmptyList>
<p class="empty">No contacts! :(</p>
</ng-template>
</igx-list>
let emptyTemplate = this.list.emptyListTemplate;
Event emitted when a pan gesture is completed or canceled.
Provides a reference to an object of type IListItemPanningEventArgs as an event argument.
<igx-list (endPan)="endPan($event)"></igx-list>
Sets/gets the id of the list.
If not set, the id of the first list component will be "igx-list-0".
<igx-list id="my-first-list"></igx-list>
let listId = this.list.id;
Sets/gets whether the list is currently loading data.
Set it to display the dataLoadingTemplate while data is being retrieved.
Default value is false.
<igx-list [isLoading]="true"></igx-list>
let isLoading = this.list.isLoading;
Event emitted when a list item is clicked.
Provides references to the IgxListItemComponent and Event as event arguments.
<igx-list (itemClicked)="onItemClicked($event)"></igx-list>
Event emitted when a left pan gesture is executed on a list item.
Provides a reference to an object of type IListItemPanningEventArgs as an event argument.
<igx-list [allowLeftPanning]="true" (leftPan)="leftPan($event)"></igx-list>
Sets/gets the template for left panning a list item.
Default value is null.
<igx-list [allowLeftPanning]="true">
<ng-template igxListItemLeftPanning>
<igx-icon>delete</igx-icon>Delete
</ng-template>
</igx-list>
let itemLeftPanTmpl = this.list.listItemLeftPanningTemplate;
Sets/gets the template for right panning a list item.
Default value is null.
<igx-list [allowRightPanning] = "true">
<ng-template igxListItemRightPanning>
<igx-icon>call</igx-icon>Dial
</ng-template>
</igx-list>
let itemRightPanTmpl = this.list.listItemRightPanningTemplate;
Provides a threshold after which the item's panning will be completed automatically.
By default this property is set to 0.5 which is 50% of the list item's width.
<igx-list [panEndTriggeringThreshold]="0.8"></igx-list>
Event emitted when a pan gesture is executed on a list item.
Provides references to the IgxListItemComponent and IgxListPanState as event arguments.
<igx-list (panStateChange)="panStateChange($event)"></igx-list>
Event emitted when a pan item is returned to its original position.
Provides a reference to an object of type IgxListComponent as an event argument.
<igx-list (resetPan)="resetPan($event)"></igx-list>
Event emitted when a right pan gesture is executed on a list item.
Provides a reference to an object of type IListItemPanningEventArgs as an event argument.
<igx-list [allowRightPanning]="true" (rightPan)="rightPan($event)"></igx-list>
Event emitted when a pan gesture is started.
Provides a reference to an object of type IListItemPanningEventArgs as an event argument.
<igx-list (startPan)="startPan($event)"></igx-list>
Gets the context object of the template binding.
Gets the context object which represents the template context binding into the list container
by providing the $implicit declaration which is the IgxListComponent itself.
let listComponent = this.list.context;
Returns the theme of the component.
The default theme is comfortable.
Available options are comfortable, cosy, compact.
let componentTheme = this.component.displayDensity;
Sets the theme of the component.
Gets the header list items.
let listHeaders: IgxListItemComponent[] = this.list.headers;
Gets a boolean indicating if the list is empty.
let isEmpty = this.list.isListEmpty;
Gets the list items excluding the header ones.
let listItems: IgxListItemComponent[] = this.list.items;
Returns the resource strings.
Sets the resource strings. By default it uses EN resources.
Gets the role attribute value.
let listRole = this.list.role;
Gets a TemplateRef to the currently used template.
let listTemplate = this.list.template;
Displays a collection of data items in a templatable list format
Igx Module
IgxListModule
Igx Theme
igx-list-theme
Igx Keywords
list, data
Igx Group
Grids & Lists
Remarks
The Ignite UI List displays rows of items and supports one or more header items as well as search and filtering of list items. Each list item is completely templatable and will support any valid HTML or Angular component.
Example