Angular Material table row actions component with collapsible toolbar
npm install @hhangular/row-actionsAn 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.
- 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
``bash`
npm install @hhangular/row-actions
| 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 |
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
{{ element.lastUpdated }}
`
| 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) |
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.
`html`
{{ element.name }}
`html`
{{ element.name }}
`html`
`html``
MIT