CODEWITHSUNDEEP
angularngx-datatable
Brampage
Brampage

Reputation: 7034

How can a double/dbl click on row be implemented for Angular ngx-datatable?

The ngx-datatable does not have a Output property for double clicking a row.

The activate output property emits all events, this could probably be used.

How can I implement this?

Upvotes: 0

Views: 493

Answers (1)

Brampage
Brampage

Reputation: 7034

I have created a double click directive.

Here to use it:

<ngx-datatable
  (appNgxDatatableDblClick)="onDblClickRow(row)"
  ...
></ngx-datatable>

The directive:

@Directive({
  selector: '[appNgxDatatableDblClick]',
})
export class NgxDatatableDblClickDirective implements OnInit {
  @Output('appNgxDatatableDblClick') dblClick = new EventEmitter();

  constructor(private element: ElementRef) {}

  @HostListener('activate', ['$event'])
  onActivate(event: Model): void {
    if (event.type === 'dblclick' && event.row) {
      this.dblClick.emit(event.row);
    }
  }

  // Optional onInit: can be used for styling 
  // e.g.: .appNgxDatatableDblClick datatable-row-wrapper { cursor: pointer; }
  ngOnInit(): void {
    (this.element.nativeElement as Element).classList.add(
      'appNgxDatatableDblClick'
    );
  }
}

Upvotes: 2

Related Questions