@hhangular/row-actions

@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