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>

Hierarchy

  • IgxListItemComponent

Implements

Index

Constructors

  • new IgxListItemComponent(list: IgxListBaseDirective, elementRef: ElementRef<any>, _renderer: Renderer2): IgxListItemComponent

Properties

ariaLabel: string

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

this.listItem.ariaLabel = "Item1";
let itemAriaLabel = this.listItem.ariaLabel;
memberof

IgxListItemComponent

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: 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: any

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

const leftPanTmpl = this.listItem.leftPanningTemplateElement;
list: IgxListBaseDirective
rightPanningTemplateElement: any

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

const rightPanTmpl = this.listItem.rightPanningTemplateElement;
touchAction: string = 'pan-y'

Gets the touch-action style of the list item.

let touchAction = this.listItem.touchAction;

Accessors

  • get contentElement(): any
  • get context(): any
  • get display(): string
  • get element(): any
  • get headerStyle(): boolean
  • get index(): number
  • set index(value: number): void
  • get innerStyle(): boolean
  • get maxLeft(): number
  • get maxRight(): any
  • get role(): "separator" | "listitem"
  • get width(): any