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>