CODEWITHSUNDEEP
angularangular6ngx-datatableevent-binding
Sunil Kumar
Sunil Kumar

Reputation: 949

Angular conditional event binding

I am working on an angular project where I have implemented ngx-datatables to display data in table.

I am creating a common wrapper which can be used in multiple components.

I want to give an option in calling component to decide weather it would be client side or server side(paging and sorting) based on some variable(isServerSide).

If there would be a single event, I can do something like :

*ngIf="isServerSide" (page)='loadPage($event)'

I don't how to bind multiple events based some condition for a single tag. Below is my code :

  <ngx-datatable  class="material striped"
        [columns]="columns"
        [columnMode]="'force'"
        [rows]="gridModel.Data"
        [headerHeight]="'auto'"
        [footerHeight]="'auto'"
        [rowHeight]="'auto'"
        [externalPaging]="true"
        [externalSorting]="true"
        [count]="gridModel?.TotalElements"
        [offset]="gridModel?.CurrentPageNumber"
        [limit]="gridModel?.PageSize"
        [loadingIndicator]="gridModel?.isLoading"
        (page)='loadPage($event)'
        (sort)="onSort($event)">
</ngx-datatable>

export class GridModel<T> {
  PageSize: number;
  TotalElements: number;
  TotalPages: number;
  CurrentPageNumber: number;
  SortBy: string;
  SortDir: string;
  Data: Array<T>;
  isLoading: boolean = false;
  isServerSide: boolean = false;
}

Upvotes: 1

Views: 514

Answers (1)

AnchikM
AnchikM

Reputation: 3

onPageSorted($event) {
    let _sort = $event.sorts[0];
    this.filter.orderByColumnNameDESC = _sort.dir == 'desc' && _sort.prop == 'ColumnName';
    this.filter.orderByColumnNameASC = _sort.dir == 'asc' && _sort.prop == 'ColumnName';


    event.stopPropagation(); - stop auto table sort to use only from server
    event.preventDefault();
    this.performFilter(); - here your client request with this.filter params
}

for table:

  <ngx-datatable
            ...
            [externalSorting] = "true"
            (sort)="onPageSorted($event)">
 </ngx-datatable>

I hope it help someone)

Upvotes: 0

Related Questions