Class IgxListComponent

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

<igx-list>
<igx-list-item isHeader="true">Contacts</igx-list-item>
<igx-list-item *ngFor="let contact of contacts">
<span class="name">{{ contact.name }}</span>
<span class="phone">{{ contact.phone }}</span>
</igx-list-item>
</igx-list>

Hierarchy

Hierarchy

  • IgxListBaseDirective
    • IgxListComponent

Constructors

Properties

allowLeftPanning: boolean = false

Sets/gets whether the left panning of an item is allowed.

Remarks

Default value is false.

Example

<igx-list [allowLeftPanning]="true"></igx-list>
let isLeftPanningAllowed = this.list.allowLeftPanning;
allowRightPanning: boolean = false

Sets/gets whether the right panning of an item is allowed.

Remarks

Default value is false.

Example

<igx-list [allowRightPanning]="true"></igx-list>
let isRightPanningAllowed = this.list.allowRightPanning;
children: QueryList<IgxListItemComponent>

Returns a collection of all items and headers in the list.

Example

let listChildren: QueryList = this.list.children;
dataLoadingTemplate: IgxDataLoadingTemplateDirective

Sets/gets the list loading template.

Remarks

This template is used by IgxList in case there are no list items defined and isLoading is set to true.

Example

<igx-list>
<ng-template igxDataLoading>
<p>Patience, we are currently loading your data...</p>
</ng-template>
</igx-list>
let loadingTemplate = this.list.dataLoadingTemplate;
densityChanged: EventEmitter<IDensityChangedEventArgs> = ...
element: ElementRef<any>

Sets/gets the empty list template.

Remarks

This template is used by IgxList in case there are no list items defined and isLoading is set to false.

Example

<igx-list>
<ng-template igxEmptyList>
<p class="empty">No contacts! :(</p>
</ng-template>
</igx-list>
let emptyTemplate = this.list.emptyListTemplate;
endPan: EventEmitter<IListItemPanningEventArgs> = ...

Event emitted when a pan gesture is completed or canceled.

Remarks

Provides a reference to an object of type IListItemPanningEventArgs as an event argument.

Example

<igx-list (endPan)="endPan($event)"></igx-list>
id: string = ...

Sets/gets the id of the list.

Remarks

If not set, the id of the first list component will be "igx-list-0".

Example

<igx-list id="my-first-list"></igx-list>
let listId = this.list.id;
isLoading: boolean = false

Sets/gets whether the list is currently loading data.

Remarks

Set it to display the dataLoadingTemplate while data is being retrieved. Default value is false.

Example

 <igx-list [isLoading]="true"></igx-list>
let isLoading = this.list.isLoading;
itemClicked: EventEmitter<IListItemClickEventArgs> = ...

Event emitted when a list item is clicked.

Remarks

Provides references to the IgxListItemComponent and Event as event arguments.

Example

<igx-list (itemClicked)="onItemClicked($event)"></igx-list>
leftPan: EventEmitter<IListItemPanningEventArgs> = ...

Event emitted when a left pan gesture is executed on a list item.

Remarks

Provides a reference to an object of type IListItemPanningEventArgs as an event argument.

Example

<igx-list [allowLeftPanning]="true" (leftPan)="leftPan($event)"></igx-list>
listItemLeftPanningTemplate: IgxListItemLeftPanningTemplateDirective

Sets/gets the template for left panning a list item.

Remarks

Default value is null.

Example

<igx-list [allowLeftPanning]="true">
<ng-template igxListItemLeftPanning>
<igx-icon>delete</igx-icon>Delete
</ng-template>
</igx-list>
let itemLeftPanTmpl = this.list.listItemLeftPanningTemplate;
listItemRightPanningTemplate: IgxListItemRightPanningTemplateDirective

Sets/gets the template for right panning a list item.

Remarks

Default value is null.

Example

<igx-list [allowRightPanning] = "true">
<ng-template igxListItemRightPanning>
<igx-icon>call</igx-icon>Dial
</ng-template>
</igx-list>
let itemRightPanTmpl = this.list.listItemRightPanningTemplate;
panEndTriggeringThreshold: number = 0.5

Provides a threshold after which the item's panning will be completed automatically.

Remarks

By default this property is set to 0.5 which is 50% of the list item's width.

Example

<igx-list [panEndTriggeringThreshold]="0.8"></igx-list>
panStateChange: EventEmitter<IPanStateChangeEventArgs> = ...

Event emitted when a pan gesture is executed on a list item.

Remarks

Provides references to the IgxListItemComponent and IgxListPanState as event arguments.

Example

<igx-list (panStateChange)="panStateChange($event)"></igx-list>
resetPan: EventEmitter<IgxListComponent> = ...

Event emitted when a pan item is returned to its original position.

Remarks

Provides a reference to an object of type IgxListComponent as an event argument.

Example

<igx-list (resetPan)="resetPan($event)"></igx-list>
rightPan: EventEmitter<IListItemPanningEventArgs> = ...

Event emitted when a right pan gesture is executed on a list item.

Remarks

Provides a reference to an object of type IListItemPanningEventArgs as an event argument.

Example

<igx-list [allowRightPanning]="true" (rightPan)="rightPan($event)"></igx-list>
startPan: EventEmitter<IListItemPanningEventArgs> = ...

Event emitted when a pan gesture is started.

Remarks

Provides a reference to an object of type IListItemPanningEventArgs as an event argument.

Example

<igx-list (startPan)="startPan($event)"></igx-list>

Accessors

  • get context(): any
  • Gets the context object of the template binding.

    Remark

    Gets the context object which represents the template context binding into the list container by providing the $implicit declaration which is the IgxListComponent itself.

    Example

    let listComponent =  this.list.context;
    

    Returns any

Methods

  • Sets the --component-size CSS variable based on the value of Display Density

    Returns "var(--ig-size, var(--ig-size-small))" | "var(--ig-size, var(--ig-size-medium))" | "var(--ig-size, var(--ig-size-large))"