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](https://hhangular.github.io/row-actions/)** | **[Release Notes](RELEASE_NOTES.md)**
## 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
```
### Peer Dependencies
| 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 }}
```
## API
### Inputs
| 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) |
### Position Behavior
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
### Basic Usage (Right-aligned)
```html
{{ element.name }}
```
### Left-aligned Toolbar
```html
{{ element.name }}
```
### With Custom Color
```html
```
### Conditionally Disabled
```html
```
## License
MIT
---
_Source: https://npm.io/package/@hhangular/row-actions · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
