@feature23/ngx-mat-split-button

ngx-mat-split-button

A split button component for Angular Material.

Installation

npm i --save @feature23/ngx-mat-split-button

Usage

Import NgxMatSplitButton and NgxMatSplitButtonPrimaryAction into either your standalone component's imports array, or the module in which it will be used.

You likely will also need to import MatMenuItem from @angular/material/menu, if you want to use the attached menu as intended.

Example:

<ngx-mat-split-button color="primary" buttonStyle="raised" (primaryClick)="primaryClick()">
    <ng-template ngx-mat-split-primary-action>
        Primary action
    </ng-template>
    <button mat-menu-item (click)="secondaryClick()">Item 1</button>
    <button mat-menu-item (click)="secondaryClick()">Item 2</button>
    <button mat-menu-item (click)="secondaryClick()">Item 3</button>
</ngx-mat-split-button>

The ng-template with the ngx-mat-split-primary-action directive is required to provide the inner content for the primary action button (the button to the left of the dropdown arrow). Anything else inside the ngx-mat-split-button component will be rendered in the dropdown menu, which internally is just a mat-menu with xPosition="before".

Inputs

The ngx-mat-split-button component has the following inputs to customize its appearance and behavior:

Input	Type	Description
color	'primary' | 'accent' | 'warn' | undefined	(Optional; default undefined) The color of the primary action button. (Material 2 themes only.)
buttonStyle	'raised' | 'stroked' | 'flat' | 'basic'	(Optional; default 'basic') The style of the primary action button. These map to the equivalent Angular Material Button directives, with raised being slightly different in the DOM than the others due to needing a unified shadow. (raised style uses mat-flat-button internally with a box-shadow.)
primaryDisabled	boolean	(Optional; default false) Whether the primary action button should be disabled.
menuTriggerDisabled	boolean	(Optional; default false) Whether the dropdown menu trigger button should be disabled.

Events

The following output events are available to support interactivity:

Output	Event/Argument Type	Description
primaryClick	MouseEvent	Emitted when the primary action button is clicked.
menuTriggerClick	MouseEvent	Emitted when the dropdown menu trigger button is clicked.

To handle clicks on the secondary action buttons, you can simply add (click)="handler()" to the buttons you provide inside the ngx-mat-split-button component.