Action

Action is just a representation of the command that is utilized by q-grid. Use <ng-template for="trigger"> component to customize action.

Installation

Add validation module to imports section.

import { GridModule } from 'ng2-qgrid';
import { ThemeModule } from 'ng2-qgrid/theme/material';
import { ValidationModule } from 'ng2-qgrid/plugin/validation';

@NgModule({
   imports: [
      GridModule,
      ThemeModule,
      ValidationModule
   ]
})
export class AppModule {
}

Add angular component inside of q-grid component.

import { Command } from 'ng2-qgrid';

@Component({
   selector: 'my-component',
   template: `
      <q-grid [rows]="rows$ | async">
         <q-grid-columns generation="deep">
         </q-grid-columns>

         <q-grid-actions>
            <q-grid-action icon="refresh"
                           title="Load Data"
                           [command]="loadCommand">
              </q-grid-action>
              <q-grid-action icon="clear_all"
                             title="Delete Data"
                             [command]="clearCommand">
              </q-grid-action>           
         </q-grid-actions>
    </q-grid>
   `
})
export class MyComponent {
   rows$: Observable<any[]>;
   canLoad = true;

   constructor(private dataService: MyDataService) {}

   loadCommand = new Command({
      execute: () => {
         this.rows$ = this.dataService.getAtoms();
         this.canLoad = false;
      },
      canExecute: () => this.canLoad,
      shortcut: 'ctrl+l'
   });

   clearCommand = new Command({
      execute: () => {
         this.rows$ = of([]);
         this.canLoad = true;
      },
      canExecute: () => !this.canLoad,
      shortcut: 'ctrl+d'
   });
}
How to override action template?

Use ng-template inside q-grid-action template.

 <q-grid [rows]="rows$ | async">
    <q-grid-columns generation="deep">
    </q-grid-columns>

    <q-grid-actions>
        <q-grid-action id="sort-by-symbol-asc">
            <ng-template for="trigger"
                         let-$action>
                <button (click)="sortAsc()"
                        mat-button>
                    Sort By Symbol Asc
                </button>
            </ng-template>
        </q-grid-action>
        <q-grid-action id="sort-by-symbol-desc">
            <ng-template for="trigger"
                         let-$action>
                <button (click)="sortDesc()"
                        mat-button>
                    Sort By Symbol Desc
                </button>
            </ng-template>
        </q-grid-action>
    </q-grid-actions>
</q-grid>

Note that id property is required when use custom template for action.