Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

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

Accessors

Constructors

constructor

Properties

allowLeftPanning

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

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

children: QueryList<IgxListItemComponent>

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

Example

let listChildren: QueryList = this.list.children;

dataLoadingTemplate

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;

element

element: ElementRef<any>

emptyListTemplate

emptyListTemplate: IgxEmptyListTemplateDirective

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

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

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

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

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

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

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

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

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

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

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

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

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

context

  • 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

headers

isListEmpty

items

resourceStrings

role

template