Celero Shared Menu
This section describes the BfmMenuComponent component.
Composition
The BfmMenuComponent is composed of the following components:
- BfmMenuBackgroundComponent - Menu background component.
- BfmDropdownMenuItemComponent - Dropdown menu item component.
- BfmCompanyNotesComponent - Company notes component.
- BfmCompanySelectorComponent - Company selector component.
- BfmProfileMenuItemComponent - Profile menu item component.
- BfmWarningComponent - Warning component.
- BfmTrialDaysLeftComponent - Trial days left component.
Usage
You need to import it in your module and use it in your template.
menu.component.ts
import { BfmMenuComponent } from '@celerofinancas/ui-user-kit';
@Component({
standalone: true,
selector: 'menu',
imports: [BfmMenuComponent],
templateUrl: './menu.component.html',
})
export class MenuComponent {}
Then, in your template, you can use the component like this:
menu.component.html
<bfm-menu />
Inputs
The BfmMenuComponent component has no inputs.
Events
The BfmMenuComponent component has no events.
Configuration
To customize the BfmMenuComponent, you can inject the VISIBILITY_MENU_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 |
|---|---|---|
blackList | A list of keys to exclude from specific operations. | ["menu-profile-item-cancellation", "menu-profile-item-cancellation-revoke", "menu-profile-item-open-finance"] |
The VISIBILITY_MENU_CONFIGS default values are:
{
"blackList": [
"menu-profile-item-cancellation",
"menu-profile-item-cancellation-revoke",
"menu-profile-item-open-finance",
]
}
Example
To customize the BfmMenuComponent, you can inject the VISIBILITY_MENU_CONFIGS token in your module.
app.config.ts
import { ApplicationConfig } from '@angular/core';
import { VISIBILITY_MENU_CONFIGS } from '@celerofinancas/ui-user-kit';
export const appConfig: ApplicationConfig = {
providers: [
{
provide: VISIBILITY_MENU_CONFIGS,
useValue: {
blackList: ['menu-predicted-done', 'menu-pending'],
},
},
],
};