Cannot create custom group-header template for row-grouping outside <ngx-datatable> tag

[shahks]

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

<ngx-datatable class="material"
               [class.Android4]="isAndroid4"
               [rows]="rows"
               [columns]="columns"
               [rowClass]="rowClass ? rowClass : null"
               [columnMode]="'force'"
               [headerHeight]="50"
               [footerHeight]="50"
               [rowHeight]="null"
               [limit]="10"
               [loadingIndicator]="loadingIndicator"
               [groupRowsBy]="groupRowsBy"
               [groupExpansionDefault]="groupExpansionDefault">

        <!-- Group Header Template -->
        <ngx-datatable-group-header *ngIf="groupRowsBy">
            <ng-template let-group="group" let-expanded="expanded" ngx-datatable-group-header-template>
                    <button class="btn btn-link link">{{group.key}}</button>
            </ng-template>
        </ngx-datatable-group-header>

</ngx-datatable>

I am not able to create group header template outside the scope of .

Under app.component I have 2 components

1. status.component and 2. table.component which are siblings of each other.

table component has the above code

Various things I tried in status.component but it does not work.

1. created the same group header template in status.component but there is no way to link it to the

       <!-- Group Header Template -->
       <ngx-datatable-group-header *ngIf="groupRowsBy">
           <ng-template let-group="group" let-expanded="expanded" ngx-datatable-group-header-template>
                   <button class="btn btn-link link">{{group.key}}</button>
           </ng-template>
       </ngx-datatable-group-header>

2. used ng-content to replace it with group header template but that does not work too

<ngx-datatable class="material"
               [class.Android4]="isAndroid4"
               [rows]="rows"
               [columns]="columns"
               [rowClass]="rowClass ? rowClass : null"
               [columnMode]="'force'"
               [headerHeight]="50"
               [footerHeight]="50"
               [rowHeight]="null"
               [limit]="10"
               [loadingIndicator]="loadingIndicator"
               [groupRowsBy]="groupRowsBy"
               [groupExpansionDefault]="groupExpansionDefault">

        <!-- Group Header Template -->
        <ng-content></ng-content>

</ngx-datatable>

3. Tried to search for property that can be assigned as group-header-template (something similar to cellTemplate from column) but couldn't find that

Expected behavior Should be able to create custom header template outside the scope of

Reproduction of the problem

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

Please tell us about your environment:

• Table version: 11.1.5 Also checked with latest version but doesn't work

• Angular version: 5.2.1

• Browser: Chrome XX

• Language: TypeScript 2.7.1

[CaffGeek]

i bet if you remove [limit] the grouping starts working (I'm having this issue now)