List Page

This section describes the BfmChargeListPageComponent component.

Composition

The BfmChargeListPageComponent is composed of the following components:

• BfmChargeListComponent - Description of BfmChargeListComponent.
• BfmChargeFiltersComponent - Description of BfmChargeFiltersComponent.
• BfmChargeListHeaderComponent - Description of BfmChargeListHeaderComponent.

Usage

You can import the BfmChargeListPageComponent directly in your route configuration.

import { BfmChargeListPageComponent } from '@celerofinancas/ui-charges';

const routes = [
  {
    path: 'list',
    component: BfmChargeListPageComponent,
  },
];

But if you need more customization, you need to import it in your module and use it in your template.

bfm-charge-list-page.component.ts

import { BfmChargeListPageComponent } from '@celerofinancas/ui-charges';

@Component({
  standalone: true,
  selector: 'bfm-charge-list-page',
  imports: [BfmChargeListPageComponent],
  templateUrl: './charge-list-page.component.html',
})
export class ChargeListPageComponent {}

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

charge-list-page.component.html

<bfm-charge-list-page/>

Inputs

The BfmChargeListPageComponent component has no inputs.

Events

The BfmChargeListPageComponent component has no events.

Configuration

To customize the BfmChargeListPageComponent, you can inject the CHARGE_LIST_CONFIGS 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

Key	Description	Default
keychain	Keychain used for authentication.	null
integrationsLoading$	Observable indicating the loading state of integrations.	new BehaviorSubject(false)

The CHARGE_LIST_CONFIGS default values are:

{
  keychain: null,
  integrationsLoading$: new BehaviorSubject(false),
}

Example

To customize the BfmChargeListPageComponent, you can inject the CHARGE_LIST_CONFIGS token in your module.

app.config.ts

import { ApplicationConfig } from "@angular/core";
import { ChargeListService } from "./charge-list.service";

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: CHARGE_LIST_CONFIGS,
      useClass: ChargeListService
    },
  ],
};

charge-list.service.ts

import { ApplicationConfig } from "@angular/core";
import { YourCustomService } from './your-custom-service';
import { KEYCHAINS } from '@celerofinancas/core-ts';
import { KeychainState } from '@celerofinancas/state-management';

@Injectable({
  providedIn: 'root',
})
export class ChargeListService {
 
 @Select(KeychainState.getCombinedLoading([KEYCHAINS.yourKeychain]))
 public integrationsLoading$: Observable<boolean>;

 public keychain = KEYCHAINS.key;

}