@hhangular/row-actions

Row-actions

Button bar collapsable component on your table effortlessly

This library contains an standalone angular component RowActionsComponet that allows you to add a collapsable toolbar actions in angular material table.

Demo

stackblitz

Component

• row-actions is the main component

            <ng-container matColumnDef="updated" stickyEnd>
                <mat-header-cell *matHeaderCellDef i18n="@@UPDATED">Updated</mat-header-cell>
                <mat-cell *matCellDef="let element">
                    {{element.updatedBy }}
                    <row-actions [open]="element === overflownElement">
                      <button mat-icon-button>
                    </row-actions>
...
...
...
...
...
            <mat-row *matRowDef="let element; columns: displayColumns" (mouseenter)="overflownElement = element" (mouseleave)="overflownElement = undefined">

  // In your controller
  overflownElement: any | undefined;

Installation

For help getting started with a new Angular app, check out the Angular CLI.

For existing apps, follow these steps to begin using @hhangular/row-actions in your Angular app.

Install @hhangular/row-actions

You can use either the npm or yarn command-line tool to install the package.
Use whichever is appropriate for your project in the examples below.

NPM

# @hhangular/row-actions
npm install @hhangular/row-actions --save 

YARN

# @hhangular/row-actions
yarn add @hhangular/row-actions

Peer dependence

name	version
@angular/common	^17.0.0
@angular/core	^17.0.0
@angular/material	^17.0.0

Configuration

Just import the standalone component RowActionsComponent and you can use the component.
You can do this in your AppModule, in your SharedModule indifferently or directly in other standalone component.

Component.ts

// ================= IMPORT =================
import {RowActionsComponent} from '@hhangular/row-actions';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [RowActionsComponent],
  template: `
  ...
  `,
})
export class Component {
  ...
}

AppModule.ts

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {CommonModule} from '@angular/common';
import {HttpClientModule} from '@angular/common/http';
import {AppComponent} from './app.component';
// ================= IMPORT =================
import {RowActionsComponent} from '@hhangular/row-actions';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    CommonModule,
    HttpClientModule,
// ================= IMPORT =================
    RowActionsComponent,
  ],
  bootstrap: [AppComponent],
  providers: []
})
export class AppModule {
}

---

SharedModule.ts

import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
// ================= IMPORT =================
import {RowActionsComponent} from '@hhangular/row-actions';

@NgModule({
  imports: [
    CommonModule,
// ================= IMPORT =================
    RowActionsComponent,
  ],
  exports: [
// ================= EXPORT =================
    RowActionsComponent,
  ],
  declarations: [],
})
export class SharedModule {
}

Use

The use of 'Component': row-actions is very simple.

Use cases

You want to add a collapsable toolbar on each row to you mat-table

---

In a component template just add in cell with row direction (default) where you want that the toolbar appear. If you put the in the first position, the toolbar will be appear from left, if you put the in last position, the toolbar will be appear from right.

            <ng-container matColumnDef="updated" stickyEnd>
                <mat-header-cell *matHeaderCellDef i18n="@@UPDATED">Updated</mat-header-cell>
                <mat-cell *matCellDef="let element">
                    {{element.updatedBy }}
                    <row-actions [open]="element === overflownElement">
                      <!-- ADD YOUR BUTTONS mat-icon-button HERE -->
                      <button mat-icon-button>
                    </row-actions>

Fill input [open] whith overflowElement set by event (mouseenter) et (mouseleave)

            <mat-row *matRowDef="let element; columns: displayColumns" (mouseenter)="overflownElement = element" (mouseleave)="overflownElement = undefined">

In controller add overflowElement

  // In your controller
  overflownElement: any | undefined;

Inputs

<row-actions [open]="isOpen">...</row-actions>

name	description	type	sample
open	The row-actions is it open	boolean	true

Outputs

no