Class IgxListComponent

Hierarchy

  • IgxListBase
    • IgxListComponent

Implements

  • DoCheck
  • OnInit

Constructors

constructor

Properties

allowLeftPanning

allowLeftPanning: boolean = false

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;
memberof

IgxListComponent

allowRightPanning

allowRightPanning: boolean = false

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;
memberof

IgxListComponent

children

children: QueryList<IgxListItemComponent>

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

let listChildren: QueryList = this.list.children;
memberof

IgxListComponent

dataLoadingTemplate

dataLoadingTemplate: IgxDataLoadingTemplateDirective

Returns the template which will be used by the IgxList in case there are no list items defined and isLoading is set to true.

let loadingTemplate = this.list.dataLoadingTemplate;
memberof

IgxListComponent

element

element: ElementRef

emptyListTemplate

Returns the template which will be used by the IgxList in case there are no list items defined and isLoading is set to false.

let emptyTemplate = this.list.emptyListTemplate;
memberof

IgxListComponent

id

id: string = `igx-list-${NEXT_ID++}`

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;
memberof

IgxListComponent

isLoading

isLoading: boolean = false

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;
memberof

IgxListComponent

listItemLeftPanningTemplate

listItemLeftPanningTemplate: IgxListItemLeftPanningTemplateDirective

Sets/gets the template shown when left panning a list item. Default value is null.

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

IgxListComponent

listItemRightPanningTemplate

listItemRightPanningTemplate: IgxListItemRightPanningTemplateDirective

Sets/gets the template shown when right panning a list item. Default value is null.

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

IgxListComponent

onDensityChanged

onDensityChanged: EventEmitter<IDensityChangedEventArgs> = new EventEmitter<IDensityChangedEventArgs>()

onItemClicked

onItemClicked: EventEmitter<IListItemClickEventArgs> = new EventEmitter<IListItemClickEventArgs>()

Emits an event within the current list when a list item has been clicked. Provides references to the IgxListItemComponent and Event as event arguments.

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

IgxListComponent

onLeftPan

onLeftPan: EventEmitter<IListItemPanningEventArgs> = new EventEmitter<IListItemPanningEventArgs>()

Emits an event within the current list when 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" (onLeftPan)="onLeftPan($event)"></igx-list>
memberof

IgxListComponent

onPanStateChange

onPanStateChange: EventEmitter<IPanStateChangeEventArgs> = new EventEmitter<IPanStateChangeEventArgs>()

Emits an event within the current list when pan gesture is executed on list item. Provides references to the IgxListItemComponent and IgxListPanState as event arguments.

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

IgxListComponent

onRightPan

onRightPan: EventEmitter<IListItemPanningEventArgs> = new EventEmitter<IListItemPanningEventArgs>()

Emits an event within the current list when 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" (onRightPan)="onRightPan($event)"></igx-list>
memberof

IgxListComponent

panEndTriggeringThreshold

panEndTriggeringThreshold: number = 0.5

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.

this.list.panEndTriggeringThreshold = 0.8;

Accessors

context

  • get context(): any
  • Returns 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 any

displayDensity

headers

isListEmpty

  • get isListEmpty(): boolean
  • Returns boolean indicating if the list is empty.

    let isEmpty =  this.list.isListEmpty;
    memberof

    IgxListComponent

    Returns boolean

items

role

  • get role(): string

template

  • get template(): TemplateRef<any>
  • Returns the template of an empty list.

    let listTemplate = this.list.template;
    memberof

    IgxListComponent

    Returns TemplateRef<any>

Methods

ngDoCheck

  • ngDoCheck(): void