Amount Header

This section describes the AmountHeaderComponent component.

Composition

The AmountHeaderComponent has no any composition component.

Usage

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

amount-form.component.ts

import { AmountHeaderComponent } from '@celerofinancas/ui-cash-flow';

@Component({
  standalone: true,
  selector: 'bfm-amount-header',
  imports: [AmountHeaderComponent],
  templateUrl: './amount-form.component.html',
})
export class CustomAmountFormComponent {}

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

amount-form.component.html

<amount-header 
  [amountIndex]="currentIndex"
  [enableDeletion]="true"
  [enableSelection]="true"
  [showAmountTitle]="true"
  [selected]="false"
  (deleteAmount)="handleDelete($event)"
  (selection)="handleSelection($event)"
/>

Inputs

The AmountHeaderComponent component has the following inputs:

amountIndex

Current amount index in the list.

Type	Default
number	null

enableDeletion

Controls whether the deletion is enabled.

Type	Default
boolean	true

enableSelection

Whether amount selection is enabled.

Type	Default
boolean	true

selected

Whether current amount is selected.

Type	Default
boolean	false

showAmountTitle

Show view more amount info

Type	Default
boolean	true

Events

The AmountHeaderComponent component has the following Events:

deleteAmount

Emits an event when the user deletes an amount.

Type
EventEmitter

selection

Emits an event when the user selects an amount.

Type
EventEmitter