Sorting with custom template - click handler doesn't seem to work

I’m submitting a … (check one with “x”)

[X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

Looks a lot like https://github.com/swimlane/ngx-datatable/issues/431 custom column template with server side pagination on sort function is (sort)="onPageSorted($event)" and column is defined as

 <ngx-datatable-column  name="ID" [resizeable]="false" [sortable]="true" [flexGrow]="1">
        <ng-template let-column="column" ngx-datatable-header-template>
        {{column.name}}
        </ng-template>
        <ng-template let-value="value" ngx-datatable-cell-template>
           <strong>{{value}}</strong>
        </ng-template>
    </ngx-datatable-column>
 

Expected behavior

on click on the column header will trigger the event

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Table version: 0.8.x

9.3.0

• Angular version: 2.0.x

4.1.3

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

all

• Language: [all | TypeScript X.X | ES6/7 | ES5] TypeScript 2.3.4

[gyulauszkai]

True…but if you do this, it will work: https://github.com/swimlane/ngx-datatable/issues/681#issuecomment-297386597

In your case

<ngx-datatable-column  name="ID" [resizeable]="false" [sortable]="true" [flexGrow]="1">
        <ng-template let-column="column" ngx-datatable-header-template let-sort="sortFn">
 <span (click)="sort()">
        {{column.name}}
</span>
        </ng-template>
        <ng-template let-value="value" ngx-datatable-cell-template>
           <strong>{{value}}</strong>
        </ng-template>
    </ngx-datatable-column>

[kedar700]

Use this

<ng-template let-column="column" let-sort="sortFn" let-sortDir="sortDir" ngx-datatable-header-template>
<span class="mobile-hidden" (click)="sort($event, sortDir, sortFn)">{{column.name}}</span>
</ng-template>

this works now. even if you do not provide the implementation for the sort function.