Skip to main content

Selection Header

This section describes the BfmSelectionHeaderComponent component.

Composition

The BfmSelectionHeaderComponent has no any composition components.

Usage

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

selection-header.component.ts
import { BfmSelectionHeaderComponent } from '@celerofinancas/ui-cash-flow';

@Component({
standalone: true,
selector: 'selection-header',
imports: [BfmSelectionHeaderComponent],
templateUrl: './selection-header.component.html',
})
export class CustomSelectionHeaderComponent {}

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

selection-header.component.html
<bfm-selection-header
[enableRecordDeletion]="true"
[showOnlySelectedCheckbox]="true"
[warningMessage]="'Só é possível deletar registros que não estão <b>agendados</b> e/ou <b>realizados</b>'"
(bulkActionRequested)="handleBulkActionRequested($event)"
(deletionRequested)="handleDeletionRequested($event)"
(onlySelectedToggled)="handleOnlySelectedToggled($event)"
(selectionCleared)="handleSelectionCleared($event)"
/>

Inputs

The BfmSelectionHeaderComponent component has the following inputs:

enableRecordDeletion

Whether the component is able to delete records

TypeDefault
booleantrue

showOnlySelectedCheckbox

Whether the only selected checkbox should be shown

TypeDefault
booleantrue

warningMessage

Warning message when trying to delete forbidden records

TypeDefault
string'Só é possível deletar registros que não estão <b>agendados</b> e/ou <b>realizados</b>'

Events

The BfmSelectionHeaderComponent component has the following events:

bulkActionRequested

Emits when bulk action is requested

Type
EventEmitter<any>

deletionRequested

Emits when deletion is requested

Type
EventEmitter<any>

onlySelectedToggled

Emits when only selected checkbox is toggled

Type
EventEmitter<any>

selectionCleared

Emits when selection is cleared

Type
EventEmitter<any>

Configuration

To customize the BfmSelectionHeaderComponent, you can inject the SELECTION_HEADER_CONFIG token in your module.

This token is used to provide custom values to the component. If is not provided, the default values will be used.

Properties

KeyDescriptionDefault
ignoreListForbiddenRecordsValidationIf true, the component will not validate if the records are forbidden to be deleted. This is useful when you want to allow deletion of records that are scheduled or realized.true

The SELECTION_HEADER_CONFIG default values are:

{
ignoreListForbiddenRecordsValidation: true,
}

Example

To customize the BfmSelectionHeaderComponent, you can inject the SELECTION_HEADER_CONFIG token in your module.

app.config.ts
import { ApplicationConfig } from "@angular/core";
import { SELECTION_HEADER_CONFIG } from "@celerofinancas/ui-cash-flow";

export const appConfig: ApplicationConfig = {
providers: [
{
provide: SELECTION_HEADER_CONFIG,
useValue: {
ignoreListForbiddenRecordsValidation: false,
},
},
],
};