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

[object Object]

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>

Constructors

Section titled "Constructors"

IgxListComponent

new IgxListComponent(): IgxListComponent

Defined in projects/igniteui-angular/list/src/list/list.component.ts:469

Returns IgxListComponent

Properties

Section titled "Properties"

allowLeftPanning

Section titled "allowLeftPanning"

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

 
allowLeftPanning: boolean = false

Defined in projects/igniteui-angular/list/src/list/list.component.ts:300

Remarks

Default value is false.

Example

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

allowRightPanning

Section titled "allowRightPanning"

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

 
allowRightPanning: boolean = false

Defined in projects/igniteui-angular/list/src/list/list.component.ts:317

Remarks

Default value is false.

Example

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

children

Section titled "children"

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

 
children: QueryList<IgxListItemComponent>

Defined in projects/igniteui-angular/list/src/list/list.component.ts:166

Example

let listChildren: QueryList = this.list.children;

dataLoadingTemplate

Section titled "dataLoadingTemplate"

Sets/gets the list loading template.

 
dataLoadingTemplate: IgxDataLoadingTemplateDirective

Defined in projects/igniteui-angular/list/src/list/list.component.ts:209

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

Section titled "element" 
element: ElementRef<any>

Defined in projects/igniteui-angular/list/src/list/list.component.ts:154

emptyListTemplate

Section titled "emptyListTemplate"

Sets/gets the empty list template.

 
emptyListTemplate: IgxEmptyListTemplateDirective

Defined in projects/igniteui-angular/list/src/list/list.component.ts:188

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

Section titled "endPan"

Event emitted when a pan gesture is completed or canceled.

 
endPan: EventEmitter<IListItemPanningEventArgs>

Defined in projects/igniteui-angular/list/src/list/list.component.ts:391

Remarks

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

Example

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

id

Section titled "id"

Sets/gets the id of the list.

 
id: string

Defined in projects/igniteui-angular/list/src/list/list.component.ts:283

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

Section titled "isLoading"

Sets/gets whether the list is currently loading data.

 
isLoading: boolean = false

Defined in projects/igniteui-angular/list/src/list/list.component.ts:335

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

Section titled "itemClicked"

Event emitted when a list item is clicked.

 
itemClicked: EventEmitter<IListItemClickEventArgs>

Defined in projects/igniteui-angular/list/src/list/list.component.ts:434

Remarks

Provides references to the IgxListItemComponent and Event as event arguments.

Example

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

leftPan

Section titled "leftPan"

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

 
leftPan: EventEmitter<IListItemPanningEventArgs>

Defined in projects/igniteui-angular/list/src/list/list.component.ts:349

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

Section titled "listItemLeftPanningTemplate"

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

 
listItemLeftPanningTemplate: IgxListItemLeftPanningTemplateDirective

Defined in projects/igniteui-angular/list/src/list/list.component.ts:230

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

Section titled "listItemRightPanningTemplate"

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

 
listItemRightPanningTemplate: IgxListItemRightPanningTemplateDirective

Defined in projects/igniteui-angular/list/src/list/list.component.ts:251

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

Section titled "panEndTriggeringThreshold"

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

 
panEndTriggeringThreshold: number = 0.5

Defined in projects/igniteui-angular/list/src/list/list.component.ts:265

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

Section titled "panStateChange"

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

 
panStateChange: EventEmitter<IPanStateChangeEventArgs>

Defined in projects/igniteui-angular/list/src/list/list.component.ts:420

Remarks

Provides references to the IgxListItemComponent and IgxListPanState as event arguments.

Example

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

resetPan

Section titled "resetPan"

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

 
resetPan: EventEmitter<IgxListComponent>

Defined in projects/igniteui-angular/list/src/list/list.component.ts:405

Remarks

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

Example

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

rightPan

Section titled "rightPan"

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

 
rightPan: EventEmitter<IListItemPanningEventArgs>

Defined in projects/igniteui-angular/list/src/list/list.component.ts:363

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

Section titled "startPan"

Event emitted when a pan gesture is started.

 
startPan: EventEmitter<IListItemPanningEventArgs>

Defined in projects/igniteui-angular/list/src/list/list.component.ts:377

Remarks

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

Example

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

resourceStrings

Section titled "resourceStrings" 
resourceStrings: IListResourceStrings

Defined in projects/igniteui-angular/list/src/list/list.component.ts:458, projects/igniteui-angular/list/src/list/list.component.ts:465

role

Section titled "role" 
role: string

Defined in projects/igniteui-angular/list/src/list/list.component.ts:500, projects/igniteui-angular/list/src/list/list.component.ts:504

Accessors

Section titled "Accessors"

context

Section titled "context"

Gets the context object of the template binding.

get context(): any

Defined in projects/igniteui-angular/list/src/list/list.component.ts:582

Example

let listComponent =  this.list.context;

Returns any

headers

Section titled "headers"

Gets the header list items.

get headers(): IgxListItemComponent[]

Defined in projects/igniteui-angular/list/src/list/list.component.ts:558

Example

let listHeaders: IgxListItemComponent[] =  this.list.headers;

Returns IgxListItemComponent[]

isListEmpty

Section titled "isListEmpty"

Gets a boolean indicating if the list is empty.

get isListEmpty(): boolean

Defined in projects/igniteui-angular/list/src/list/list.component.ts:517

Example

let isEmpty =  this.list.isListEmpty;

Returns boolean

items

Section titled "items"

Gets the list items excluding the header ones.

get items(): IgxListItemComponent[]

Defined in projects/igniteui-angular/list/src/list/list.component.ts:538

Example

let listItems: IgxListItemComponent[] = this.list.items;

Returns IgxListItemComponent[]

template

Section titled "template"

Gets a TemplateRef to the currently used template.

get template(): TemplateRef<any>

Defined in projects/igniteui-angular/list/src/list/list.component.ts:596

Example

let listTemplate = this.list.template;

Returns TemplateRef<any>