Constructor
# new ListItemComponent(linesopt, item, icon, iconSlotopt, buttonopt, titleopt, descriptionopt, infoopt, subinfoopt)
The ListItemComponent is an Angular component that extends NgxBaseComponentDirective. It provides a flexible and customizable list item interface with support for icons, buttons, and various text elements. The component also handles actions and navigation based on user interactions.
A component for displaying a list item with various customization options.
sequenceDiagram
participant C as Component
participant V as View
participant U as User
C->>V: Initialize component
V->>U: Display list item
U->>V: Click on item or action
V->>C: Trigger handleAction()
C->>C: Process action
C->>V: Update view or navigate
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
lines |
string
|
<optional> |
'none' | Determines the line style of the item. Can be 'inset', 'inseet', or 'none'. |
item |
Record.<string, any>
|
The data item to be displayed in the list item. |
||
icon |
string
|
The name of the icon to be displayed. |
||
iconSlot |
'start'
|
'end'
|
<optional> |
'start' | The position of the icon within the item. |
button |
StringOrBoolean
|
<optional> |
true | Determines if the item should behave as a button. |
title |
string
|
<optional> |
The main title of the list item. |
|
description |
string
|
<optional> |
A description for the list item. |
|
info |
string
|
<optional> |
Additional information for the list item. |
|
subinfo |
string
|
<optional> |
Sub-information for the list item. |
Example
<ngx-decaf-list-item
[item]="dataItem"
icon="star"
title="Item Title"
description="Item Description"
(clickEvent)="handleItemClick($event)">
</ngx-decaf-list-item>Extends
- NgxBaseComponentDirective