@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

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:

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

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

Add the <row-actions> component inside a mat-cell:

<mat-table [dataSource]="dataSource">
  <!-- Other columns... -->

  <ng-container matColumnDef="actions">
    <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
    <mat-cell *matCellDef="let element">
      {{ element.lastUpdated }}
      <row-actions>
        <button mat-icon-button (click)="edit(element)">
          <mat-icon>edit</mat-icon>
        </button>
        <button mat-icon-button (click)="delete(element)">
          <mat-icon>delete</mat-icon>
        </button>
      </row-actions>
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

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 <row-actions> 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)

<mat-cell *matCellDef="let element">
  {{ element.name }}
  <row-actions>
    <button mat-icon-button><mat-icon>edit</mat-icon></button>
    <button mat-icon-button><mat-icon>delete</mat-icon></button>
  </row-actions>
</mat-cell>

Left-aligned Toolbar

<mat-cell *matCellDef="let element">
  <row-actions>
    <button mat-icon-button><mat-icon>edit</mat-icon></button>
    <button mat-icon-button><mat-icon>delete</mat-icon></button>
  </row-actions>
  {{ element.name }}
</mat-cell>

With Custom Color

<row-actions color="warn">
  <button mat-icon-button><mat-icon>delete</mat-icon></button>
</row-actions>

Conditionally Disabled

<row-actions [disabled]="!hasPermission">
  <button mat-icon-button><mat-icon>edit</mat-icon></button>
</row-actions>

License

MIT