<b>OnClick</b>:
<ngx-table-builder [source]="data" enable-selection #tableFirst>
<ngx-column key="selection" sticky width="55" custom-key>
<ng-template ngx-th>
<mat-checkbox
(change)="tableFirst.selection.toggleAll(data)"
[indeterminate]="tableFirst.selectionModel.isIndeterminate"
[checked]="tableFirst.selectionModel.isAll"
></mat-checkbox>
</ng-template>
<ng-template ngx-td row let-row (onClick)="$events.preventDefault()">
<mat-checkbox
[checked]="tableFirst.selectionModel.get($any(row).id)"
(change)="tableFirst.selection.toggle(row)"
></mat-checkbox>
</ng-template>
</ngx-column>
<ngx-column *ngFor="let key of tableFirst.modelColumnKeys" [key]="key">
<ng-template ngx-td (onClick)="rowOnClick($events)" let-cell>
{{ cell }}
</ng-template>
</ngx-column>
</ngx-table-builder>
<b>DblClick</b>:
<ngx-table-builder [source]="data" enable-selection #tableSecond>
<ngx-column key="selection" sticky width="55" custom-key>
<ng-template ngx-th>
<mat-checkbox
(change)="tableSecond.selection.toggleAll(data)"
[indeterminate]="tableSecond.selectionModel.isIndeterminate"
[checked]="tableSecond.selectionModel.isAll"
></mat-checkbox>
</ng-template>
<ng-template ngx-td row let-row (onClick)="$events.preventDefault()">
<mat-checkbox
[checked]="tableSecond.selectionModel.get($any(row).id)"
(change)="tableSecond.selection.toggle(row)"
></mat-checkbox>
</ng-template>
</ngx-column>
<ngx-column *ngFor="let key of tableSecond.modelColumnKeys" [key]="key">
<ng-template ngx-td (dblClick)="rowDblClick($events)" let-cell>
{{ cell }}
</ng-template>
</ngx-column>
</ngx-table-builder>
A template reference variable is often a reference to a DOM element within a template. It can also refer to a directive (which contains a component), an element, TemplateRef, or a web component. Use the hash symbol (#) to declare a reference variable. As per Official documentation it is not recommended to give same name for template reference variables as it will yield inconsistent results at runtime. Therefore, use different reference names (#tableFirst, #tableSecond).
// app.component.ts
import { TableEvent } from "@angular-ru/cdk/virtual-table";
import { Component } from "@angular/core";
import { ToastService } from "./toast.service";
import { Data } from "./data.interface";
@Component({
selector: 'app',
templateUrl: './app.component.html'
{)
export class AppComponent {
public data: Data[] = [ .. ];
constructor(private toast: ToastService) {}
public rowOnClick(events: TableEvent): void {
this.toast.success('OnClick', events);
}
public rowDblClick(events: TableEvent): void {
this.toast.success('DblClick', events);
}
{