Dashboard Value Card

This section describes the BfmDashboardValueCardComponent component.

Usage

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

value-card.component.ts

import { BfmDashboardValueCardComponent } from "@celerofinancas/ui-reports";

@Component({
  standalone: true,
  selector: 'dashboard-value-card',
  imports: [BfmDashboardValueCardComponent],
  templateUrl: './value-card.component.html',
})
export class DashboardValueCardComponent {}

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

value-card.component.html

<bfm-dashboard-value-card
  [enableColorFromValue]="true"
  [linkButtonTooltip]="'Tooltip text'"
  [loading]="false"
  [showLinkButton]="true"
  [sideTagType]="'tagType'"
  [subtitle]="'Subtitle text'"
  [title]="'Title text'"
  [tooltip]="'Tooltip text'"
  [value]="1000"
  (linkButtonClick)="handleLinkButtonClick($event)"
/>

Inputs

The BfmDashboardValueCardComponent component has the following inputs:

enableColorFromValue

Whether to enable the colorFromValue directive to be applied to the value

Type	Default
boolean	false

linkButtonTooltip

Link button tooltip

Type	Default
string	''

loading

Loading state of the component

Type	Default
boolean	false

showLinkButton

Whether to show the link button

Type	Default
boolean	false

sideTagType

Type of the side tag

Type	Default
string	''

subtitle

Subtitle text

Type	Default
string	''

title

Title text

Type	Default
string	''

tooltip

Tooltip text

Type	Default
string	''

value

Value to be displayed

Type	Default
any	null

Events

The BfmDashboardValueCardComponent component has the following events:

linkButtonClick

Triggered when the link button is clicked

Type
EventEmitter<any>