IgxListItemComponent

The Ignite UI List Item component is a container intended for row items in the Ignite UI for Angular List 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>

Constructors

new IgxListItemComponent(): IgxListItemComponent

Returns IgxListItemComponent

Properties

ariaLabel

Sets/gets the aria-label attribute of the list item.

this.listItem.ariaLabel = "Item1";

let itemAriaLabel = this.listItem.ariaLabel;

ariaLabel: string

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

hidden

Sets/gets whether the list item is hidden. By default the hidden value is false.

<igx-list-item [hidden] = "true">Hidden Item</igx-list-item>

let isHidden =  this.listItem.hidden;

hidden: boolean = false

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

isHeader

Sets/gets whether the list item is a header.

<igx-list-item [isHeader] = "true">Header</igx-list-item>

let isHeader =  this.listItem.isHeader;

isHeader: boolean

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

leftPanningTemplateElement

Provides a reference to the template's base element shown when left panning a list item.

const leftPanTmpl = this.listItem.leftPanningTemplateElement;

leftPanningTemplateElement: any

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

list

list: IgxListBaseDirective

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

rightPanningTemplateElement

Provides a reference to the template's base element shown when right panning a list item.

const rightPanTmpl = this.listItem.rightPanningTemplateElement;

rightPanningTemplateElement: any

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

touchAction

Gets the touch-action style of the list item.

let touchAction = this.listItem.touchAction;

touchAction: string = 'pan-y'

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

Accessors

contentElement

Returns a reference container which contains the list item's content.

let listItemContainer =  this.listItem.contentElement.

get contentElement(): any

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

Returns any

context

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

let listItemComponent = this.listItem.context;

get context(): any

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

Returns any

display

Returns string value which describes the display mode of the list item.

let isHidden = this.listItem.display;

get display(): string

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

Returns string

element

Returns an element reference to the list item.

let listItemElement =  this.listItem.element.

get element(): any

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

Returns any

headerStyle

Indicates whether list item should have header style.

let headerStyle =  this.listItem.headerStyle;

get headerStyle(): boolean

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

Returns boolean

index

Gets the index of a list item.

let itemIndex =  this.listItem.index;

get index(): number

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

Returns number

Sets the index of the list item.

this.listItem.index = index;

set index(value: number): void

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

Parameters

value: number

Returns void

innerStyle

Applies the inner style of the list item if the item is not counted as header.

let innerStyle =  this.listItem.innerStyle;

get innerStyle(): boolean

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

Returns boolean

maxLeft

Gets the maximum left position of the list item.

let maxLeft = this.listItem.maxLeft;

get maxLeft(): number

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

Returns number

maxRight

Gets the maximum right position of the list item.

let maxRight = this.listItem.maxRight;

get maxRight(): any

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

Returns any

panState

Gets the panState of a list item.

let itemPanState =  this.listItem.panState;

get panState(): IgxListPanState

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

Returns IgxListPanState

role

Gets/Sets the role attribute of the list item.

let itemRole =  this.listItem.role;

get role(): string

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

Returns string

set role(val: string): void

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

Parameters

val: string

Returns void

selected

Sets/gets whether the list item is selected. Selection is only applied to non-header items. When selected, the CSS class 'igx-list__item-base--selected' is added to the item.

<igx-list-item [selected]="true">Selected Item</igx-list-item>

let isSelected = this.listItem.selected;
this.listItem.selected = true;

get selected(): boolean

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

Returns boolean

set selected(value: boolean): void

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

Parameters

value: boolean

Returns void

width

Gets the width of a list item.

let itemWidth = this.listItem.width;

get width(): any

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

Returns any