Class CustomButtons

CustomButtons component renders a list of customizable buttons.

Selector

app-custom-buttons

Standalone

true

Imports

[CommonModule, FormsModule, FontAwesomeModule]

Input

buttons - Array of button configurations. Each button configuration includes properties such as:

  • action: Function executed on button click.
  • show: Boolean or function determining button visibility.
  • backgroundColor: Background color of the button.
  • disabled: Boolean to disable button if set to true.
  • icon: Optional FontAwesome icon displayed on the button.
  • iconStyle: Style applied to the icon.
  • text: Text displayed on the button.
  • textStyle: Style applied to the text.
  • customComponent: A custom Angular component or HTML element rendered within the button.
  • injector: Injector used for providing dependencies to the custom component.

Example

<app-custom-buttons [buttons]="buttonsArray"></app-custom-buttons>

Example

const buttonsArray: CustomButton[] = [
  {
    action: () => console.log('Button 1 clicked'),
    show: true,
    backgroundColor: 'blue',
    disabled: false,
    icon: faCoffee,
    iconStyle: { color: 'white' },
    text: 'Button 1',
    textStyle: { color: 'white' },
    customComponent: <CustomComponent />,
    injector: Injector.create({
      providers: [{ provide: 'customProp', useValue: 'customValue' }]
    }),
  },
];

CustomButtons

Method

mergeStyles - Merges default styles with user-provided custom styles.

Method

isCustomComponentConfig - Type guard to check if an object is of type CustomComponent.

Accessors

customButtonIcon

Constructors

constructor

Methods

mergeStyles isCustomComponentConfig

Properties

buttons faSpinner

Accessors

customButtonIcon

Constructors

constructor

Methods

mergeStyles

isCustomComponentConfig

Properties

buttons

buttons: CustomButton[]

faSpinner

faSpinner: IconDefinition = faSpinner

Settings

Member Visibility

On This Page

Accessors
Constructors
Methods
Properties