Skip to main content

List Item

This section describes the BfmListItemComponent component.

Composition

The BfmListItemComponent has no composition subcomponents.

Usage

You need to import it in your module and use it in your template.

list-item.component.ts
import { BfmListItemComponent } from '@celerofinancas/ui-cash-flow';

@Component({
standalone: true,
selector: 'list-item',
imports: [BfmListItemComponent],
templateUrl: './list-item.component.html',
})
export class ListItemComponent {}

Then, in your template, you can use the component like this:

list-item.component.html
<bfm-list-item 
[financialRecord]="financialRecord"
[options]="options"
[selected]="selected"
[showScheduledDateOnDueDate]="showScheduledDateOnDueDate"
(itemSelected)="handleItemSelected($event)"
(modalEmitter)="handleModalEmitter($event)"
/>

Inputs

The BfmListItemComponent component has the following inputs:

financialRecord

Financial record data - Based on FinancialRecordListItem interface

TypeDefault
FinancialRecordListItem{}

options

A custom options object to configure the list item - Based on ListItemOptions interface

TypeDefault
ListItemOptions{ columns: [] }

selected

Applies selected class to row - Defaults to: false

TypeDefault
booleanfalse

showScheduledDateOnDueDate

Whether to show scheduled_date value on due_date column, if available - Defaults to: false

TypeDefault
booleanfalse

Events

The BfmListItemComponent component has the following events:

itemSelected

Event when item is selected

Type
EventEmitter<any>

modalEmitter

Event when modal is clicked

Type
EventEmitter<any>