API Reference
All exported symbols from @ngm-dev/mat-exp
Components
- MatExpButtonGroup Component that groups buttons and provides single/multi-select behavior compatible with Angular reactive and template-driven forms.
- MatExpLoadingIndicator Material 3 Expressive loading indicator. Renders a continuously morphing and rotating shape that loops through the seven canonical M3 shapes. All animation work is driven by GSAP – there are no CSS keyframes: - **Entry** – Angular's `(animate.enter)` event binding hands control to GSAP, which fades the wrapper from `autoAlpha: 0 / scale: 0.85 → 1` over ~200ms (`power2.out`) and calls `event.animationComplete()` once the tween finishes. - **Exit** – `(animate.leave)` runs the inverse tween over ~150ms (`power2.in`); Angular waits for `animationComplete()` before detaching the element from the DOM. - **Rotation & shape morph** – modelled on the Compose Material3 `LoadingIndicator` choreography: - a continuous **linear background rotation** on a wrapper `<g>` (`intervalMs × ~7.178` per full revolution, matching Compose's ratio), - on top of it, a **per-step spring** that morphs the inner `<path>` to the next shape **and** kicks its rotation by 90°, eased through one of the M3 Expressive spatial spring cubic-bezier presets. The spring's overshoot is what produces the visible bounce at each morph boundary. Motion tokens live in `loading-indicator.animation.ts` – the SCSS only ships visual tokens (size, colour, ratio). Override motion globally via `provideMatExpLoadingIndicatorOptions` or per-instance via the `speed` input. `prefers-reduced-motion: reduce` is honoured on every layer: the entry / exit tweens short-circuit to `event.animationComplete()`, and the rotation / morph timelines are skipped via `gsap.matchMedia()`.
- MatExpSplitButton Component to style the Angular Material Button component with latest Material 3 Design System Expressive styles.
Directives
- MatExpButton Directive to style the Angular Material Button component with latest Material 3 Design System Expressive styles.
- MatExpFabMenu
- MatExpFabMenuTrigger
- MatExpIconButton Directive to style the Angular Material Icon Button component with latest Material 3 Design System Expressive styles.
Classes
- ButtonAdapter Adapts a `MatExpButton` directive instance to the `ButtonGroupChild` contract.
- IconButtonAdapter Adapts a `MatExpIconButton` directive instance to the `ButtonGroupChild` contract.
- MatExpSelectableButtonChange Change event object emitted by button toggle.
Interfaces
- ButtonGroupChild Narrow contract that `MatExpButtonGroup` and `MatExpSplitButton` depend on instead of reaching into the full public surface of `MatExpButton` / `MatExpIconButton`. Keeping this interface narrow means a change to either button directive's public setters no longer ripples silently into both group/split-button implementations - only the adapter for the affected directive needs to change.
- ButtonGroupChildBroadcastConfig Reactive sources that can drive a broadcast to a set of `ButtonGroupChild` instances.
- MatExpButtonGroupOptions
- MatExpButtonOptions
- MatExpIconButtonOptions
- MatExpLoadingIndicatorOptions
- MatExpSelectableButton
- MatExpSplitButtonOptions
Types
- MatExpButtonGroupAppearance
- MatExpButtonGroupSelection
- MatExpButtonGroupSelectionMultiSelect
- MatExpButtonGroupSelectionSingleSelect
- MatExpButtonGroupShape
- MatExpButtonGroupSize
- MatExpButtonGroupVariant
- MatExpButtonGroupVariantConnected
- MatExpButtonGroupVariantStandard
- MatExpButtonShape
- MatExpButtonShapeRound
- MatExpButtonShapeSquare
- MatExpButtonSize
- MatExpButtonSizeL
- MatExpButtonSizeM
- MatExpButtonSizeS
- MatExpButtonSizeXL
- MatExpButtonSizeXS
- MatExpButtonState
- MatExpButtonStateActive
- MatExpButtonStateDisabled
- MatExpButtonStateFocused
- MatExpButtonStateHovered
- MatExpButtonStatePressed
- MatExpButtonToggle
- MatExpButtonToggleSelected
- MatExpButtonToggleUnselected
- MatExpFabMenuColor
- MatExpFabMenuTriggerColor
- MatExpIconButtonAppearance
- MatExpIconButtonWidth
- MatExpIconButtonWidthDefault
- MatExpIconButtonWidthNarrow
- MatExpIconButtonWidthWide
- MatExpLoadingIndicatorConfig
- MatExpLoadingIndicatorSpeed Speed preset for the `mat-exp-loading-indicator`'s shape morph and rotation animation. Each preset maps to one of the M3 Expressive spatial spring tokens: - `fast` – Expressive fast spatial – `cubic-bezier(0.42, 1.67, 0.21, 0.90)`, 350ms per morph step. - `default` – Expressive default spatial – `cubic-bezier(0.38, 1.21, 0.22, 1.00)`, 500ms per morph step. - `slow` – Expressive slow spatial – `cubic-bezier(0.39, 1.29, 0.35, 0.98)`, 650ms per morph step.
- MatExpSplitButtonAppearance
Functions
- bindButtonGroupChildren Registers the effects that broadcast `size`/`shape`/`appearance`/`disabled` from a group-like host (`MatExpButtonGroup`, `MatExpSplitButton`) down to its projected `ButtonGroupChild` instances. This is the single implementation of the broadcast-effect logic that was previously duplicated between `button-group.ts` and `split-button.ts`. Must be called from within an injection context (e.g. a component/directive constructor).
- injectMatExpButtonGroupOptions
- injectMatExpButtonOptions
- injectMatExpIconButtonOptions
- injectMatExpLoadingIndicatorOptions
- injectMatExpSplitButtonOptions
- provideMatExpButtonGroupOptions
- provideMatExpButtonOptions
- provideMatExpIconButtonOptions
- provideMatExpLoadingIndicatorOptions
- provideMatExpSplitButtonOptions
- toButtonGroupChild Wraps a projected button/icon-button directive instance in its `ButtonGroupChild` adapter.
Constants
- MAT_EXP_BUTTON_GROUP Injection token that can be used to reference instances of `MatExpButtonGroup`. It serves as alternative token to the actual `MatExpButtonGroup` class which could cause unnecessary retention of the class and its component metadata.
- MAT_EXP_BUTTON_GROUP_OPTIONS
- MAT_EXP_BUTTON_GROUP_VALUE_ACCESSOR Provider Expression that allows mat-exp-button-group to register as a ControlValueAccessor. This allows it to support [(ngModel)] and reactive forms.
- MAT_EXP_BUTTON_OPTIONS
- MAT_EXP_ICON_BUTTON_OPTIONS
- MAT_EXP_LOADING_INDICATOR_OPTIONS
- MAT_EXP_SPLIT_BUTTON_OPTIONS