@hhangular/row-actions

An Angular component that displays a collapsible action toolbar when hovering over a mat-table row. The buttons appear with a smooth animation from the edge of the cell.

Live Demo | Release Notes

Features

- Collapsible Toolbar - Action buttons appear on row hover with smooth animation
- Flexible Positioning - Toolbar can appear from left or right depending on placement
- Angular Material Integration - Uses mat-toolbar with theme support (primary, accent, warn)
- Standalone Component - Easy to import in any Angular 17+ application
- Lightweight - No additional dependencies beyond Angular Material

Installation

``bash
npm install @hhangular/row-actions
`

$3

| Package | Version |
|---------|---------|
| @angular/common | >= 17.0.0 |
| @angular/core | >= 17.0.0 |
| @angular/cdk | >= 17.0.0 |
| @angular/material | >= 17.0.0 |
| @angular/animations | >= 17.0.0 |

Usage

Import the standalone component in your component:

`typescript
import { RowActionComponent } from '@hhangular/row-actions';

@Component({
selector: 'app-my-component',
standalone: true,
imports: [RowActionComponent],
template: ...
})
export class MyComponent {}
`

Add the component inside a mat-cell:

`html




Actions

{{ element.lastUpdated }}


edit


delete








`

API

$3

| Input | Type | Default | Description |
|-------|------|---------|-------------|
| color | 'primary' \| 'accent' \| 'warn' | 'primary' | Toolbar color (Angular Material theme) |
| disabled | boolean | false | Disables the component (hides it completely) |
| animationDisabled | boolean | false | Disables the expansion animation (set at initialization only) |

$3

The toolbar automatically detects its position within the cell and animates accordingly:
- First child in cell → Toolbar appears from the left
- Last child in cell → Toolbar appears from the right

You can place in any cell of your table, not just a dedicated "actions" column. This allows you to add contextual actions to specific data columns.

Examples

$3

`html

{{ element.name }}

edit
delete


`

$3

`html


edit
delete

{{ element.name }}

`

$3

`html

delete

`

$3

`html

edit

``

License

MIT