<!-- app.component.html -->
  <ngx-table-builder [source]="data">
    <ngx-context-menu>

      <ngx-context-menu-item contextTitle divider>
        <ngx-menu-content icon="./assets/angular.svg"></ngx-menu-content>
        <ngx-menu-content>My custom context menu title</ngx-menu-content>
      </ngx-context-menu-item>

      <ngx-context-menu-item (onClick)="exportExcel(data)">
        <ngx-menu-content icon="./assets/excel.png"></ngx-menu-content>
        <ngx-menu-content>Export Excel</ngx-menu-content>
      </ngx-context-menu-item>

      <ngx-context-menu-item #item divider
       [disable]="!item.state.key"
       (onClick)="showLine(item.state.key, item.state.item)">
        <ngx-menu-content icon></ngx-menu-content>
        <ngx-menu-content>Show item row</ngx-menu-content>
      </ngx-context-menu-item>

      <ngx-context-menu-item #item
       *ngIf="item.state.key === 'id'"
       (onClick)="copyId(item.state.value)">
        <ngx-menu-content icon></ngx-menu-content>
        <ngx-menu-content>Show item row</ngx-menu-content>
      </ngx-context-menu-item>

    </ngx-context-menu>
  </ngx-table-builder>

My custom context menu title Export Excel Column settings List {{ column.key }} Show item row Show column name Copy in buffer ID Price: {{ item.state.textContent }} Selected items ({{ (table1?.selectionEntries | tableSelectedItems).length }}) {{ value | currency }}

  // app.component.ts
  import { Component } from "@angular/core";
  import { Data } from "./data.interface";

  @Component({
    selector: 'app',
    templateUrl: './app.component.html'
  })
  export class AppComponent {

    public data: Data[] = [ .. ];

    public exportExcel(data: Data[]): void {
        window.alert('export excel - ' + JSON.stringify(data));
    }

    public showLine(key: string, item: Data): void {
        window.alert('key - ' + key + ' item - ' + JSON.stringify(item));
    }

    public copyId(id: string): void {
        window.alert('Copy on buffer - ' + id);
    }

  }

Note : You can also wrap the templates in your component.

  <!-- app.component.html -->
  <ngx-table-builder #table [source]="data" height="500" enable-selection>
    <ngx-options [resizable]="true" [sortable]="true"></ngx-options>

    <ngx-context-menu>
       <my-menu [table]="table"></my-menu>
    </ngx-context-menu>

    <ngx-column key="action" custom-key sticky [resizable]="false" [width]="50">
        <ng-template ngx-th></ng-template>
        <ng-template ngx-td row let-row>
            {{ table.selectionModel.get($any(row).id) ? 'x' : '-' }}
        </ng-template>
    </ngx-column>

    <ngx-column *ngFor="let key of table.modelColumnKeys" [key]="key"></ngx-column>
  </ngx-table-builder>

  // my-menu.component.ts
  import { TableBuilderComponent } from "@angular-ru/cdk/virtual-table";
  import { Component } from "@angular/core";

  @Component({
    selector: 'my-menu',
    templateUrl: './my-menu.component.html'
  })
  export class MyMenuComponent {
    @Input() public table: TableBuilderComponent;
  }

Note : You can also wrap the templates in your component.

  <!-- my-menu.component.html -->

  <!-- first item -->
  <ngx-context-menu-item contextTitle divider>
      <ngx-menu-content>Menu</ngx-menu-content>
  </ngx-context-menu-item>

  <!-- second item -->
  <ngx-context-menu-item>
      <ngx-menu-content>Column list</ngx-menu-content>

      <ngx-context-menu-item
          *ngFor="let column of table.columnSchema"
          (onClick)="table.toggleColumnVisibility(column.key); $events.preventDefault()"
          [visible]="column.isModel"
      >
          <ngx-menu-content no-margin>{{ column.key }}</ngx-menu-content>
          <ngx-menu-content no-margin align-center>
              <mat-checkbox
                  color="primary"
                  [checked]="column.visible"
              ></mat-checkbox>
          </ngx-menu-content>
      </ngx-context-menu-item>
  </ngx-context-menu-item>

  <!-- third item -->
  <ngx-context-menu-item (onClick)="table.resetSchema()" divider>
      <ngx-menu-content>Reset table settings</ngx-menu-content>
  </ngx-context-menu-item>

  <!-- fourth item -->
  <ngx-context-menu-item>

      <ngx-menu-content>Example tree</ngx-menu-content>

      <ngx-context-menu-item>
          <ngx-menu-content>Root A</ngx-menu-content>
          <ngx-context-menu-item>
              <ngx-menu-content>Child A1</ngx-menu-content>
          </ngx-context-menu-item>
          <ngx-context-menu-item>
              <ngx-menu-content>Child A2</ngx-menu-content>
          </ngx-context-menu-item>
          <ngx-context-menu-item>
              <ngx-menu-content>Child A3</ngx-menu-content>
          </ngx-context-menu-item>
      </ngx-context-menu-item>

      <ngx-context-menu-item>
          <ngx-menu-content>Root B</ngx-menu-content>
      </ngx-context-menu-item>

      <ngx-context-menu-item>
          <ngx-menu-content>Root C</ngx-menu-content>
          <ngx-context-menu-item>
              <ngx-menu-content> Child C1</ngx-menu-content>
          </ngx-context-menu-item>
          <ngx-context-menu-item>
              <ngx-menu-content>Child C2</ngx-menu-content>
          </ngx-context-menu-item>
          <ngx-context-menu-item>
              <ngx-menu-content>Child C3</ngx-menu-content>
          </ngx-context-menu-item>
      </ngx-context-menu-item>

  </ngx-context-menu-item>