Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

Class 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>

Implements

  • IListChild

Constructors

Properties

Accessors

Constructors

constructor

Properties

ariaLabel

ariaLabel: string

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

this.listItem.ariaLabel = "Item1";

let itemAriaLabel = this.listItem.ariaLabel;

Memberof

IgxListItemComponent

hidden

hidden: boolean = false

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;

Memberof

IgxListItemComponent

isHeader

isHeader: boolean

Sets/gets whether the list item is a header.

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

let isHeader =  this.listItem.isHeader;

Memberof

IgxListItemComponent

leftPanningTemplateElement

leftPanningTemplateElement: any

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

const leftPanTmpl = this.listItem.leftPanningTemplateElement;

list

list: IgxListBaseDirective

rightPanningTemplateElement

rightPanningTemplateElement: any

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

const rightPanTmpl = this.listItem.rightPanningTemplateElement;

touchAction

touchAction: string = 'pan-y'

Gets the touch-action style of the list item.

let touchAction = this.listItem.touchAction;

Accessors

contentElement

context

  • get context(): any

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

    let listItemComponent = this.listItem.context;

    Returns any

display

element

headerStyle

index

innerStyle

maxLeft

maxRight

panState

role

width