Hello dear Infragistics Team,

i am currently having trouble using custom angular components inside of my igx-grid. For example, i created a paginator-component which contains the igx-paginator with a specific styling and configuration. This will help the consistency of our products. The component looks like this:

paginator.component.html

<ng-template [ngIf]="paginatorConfig && paginatorConfig.totalCount && paginatorConfig.totalCount > 0">
    <igx-paginator #paginator [hidden]="hidden"
                   [totalRecords]="paginatorConfig.totalCount"
                   [(page)]="paginatorConfig.page"
                   [(perPage)]="paginatorConfig.perPage"
                   [selectOptions]="paginatorConfig.selectOptions"
                   (pageChange)="paginate($event)"
                   (perPageChange)="perPageChange($event)">
        <igx-paginator-content class="paginator-content">
            <igx-page-size class="paginator-page-size" #pageSize></igx-page-size>
            <div class="custom-nav-text">{{ paginatorConfig.start }}-{{ paginatorConfig.end }} von {{ paginatorConfig.totalCount }}</div>
            <igx-page-nav class="paginator-page-nav"></igx-page-nav>
        </igx-paginator-content>
    </igx-paginator>
</ng-template>

and in the component i use the grid, it looks like this:

<igx-grid #grid1 [autoGenerate]="false" [data]="gridData" height="350px" width="100%" [clipboardOptions]="options" [pinning]="pinningConfig" [locale]="localeString">

            <ng-template [ngIf]="paginatorConfig">
                <lib-paginator [paginatorConfig]="paginatorConfig" [hidden]="false"></lib-paginator>
            </ng-template>

            <ng-container *ngFor="let gridColumn of gridColumns">

                <ng-container *ngIf="gridColumn.isEnabled">

                    <ng-container *ngIf="!isColumnAuto(gridColumn)">
                        <igx-column [width]="getWidthForGridColumn(gridColumn)" header="{{ gridColumn.translationKey | l }}" field="values.{{ gridColumn.dataSourceProperty }}.value">

                            <ng-template igxCell let-cell="cell">
                                <ng-template [ngIf]="hasCellCallback(cell, gridColumn.dataSourceProperty)" [ngIfElse]="spanTemplate">
                                    <a (click)="executeCellCallback(cell, gridColumn.dataSourceProperty)">{{ cell.value }}</a>
                                </ng-template>
                                <ng-template #spanTemplate>
                                    <span>{{ cell.value }}</span>
                                </ng-template>
                            </ng-template>

                        </igx-column>
                    </ng-container>

                    <ng-container *ngIf="isColumnAuto(gridColumn)">
                        <igx-column header="{{ gridColumn.translationKey | l }}" field="values.{{ gridColumn.dataSourceProperty }}.value">

                            <ng-template igxCell let-cell="cell">
                                <ng-template [ngIf]="hasCellCallback(cell, gridColumn.dataSourceProperty)" [ngIfElse]="spanTemplate">

                                    <a (click)="executeCellCallback(cell, gridColumn.dataSourceProperty)">{{ cell.value }}</a>
                                </ng-template>
                                <ng-template #spanTemplate>
                                    <span>{{ cell.value }}</span>
                                </ng-template>
                            </ng-template>

                        </igx-column>
                    </ng-container>



                </ng-container>

            </ng-container>

            <ng-container *ngIf="gridActions && gridActions.length > 0">

                <igx-column header="{{ 'base.action' | l }}" [cellStyles]="actionCellStyles" headerClasses="action-header" [pinned]="true" width="auto">
                    <ng-template igxCell let-cell="cell">

                        <button igxButton="flat" [igxToggleAction]="menu" [igxToggleOutlet]="outlet" [overlaySettings]="overlaySettings" [igxDropDownItemNavigation]="menu" (click)="resetSelection(menu)">
                            <span class="material-icons action-icon">more_horiz</span>
                        </button>

                        <igx-drop-down #menu>
                            <div class="context-menu-wrapper">
                                <igx-drop-down-item *ngFor="let action of gridActions" class="context-item">
                                    <div (click)="executeCallback(action.callback, cell.row.data, menu)">
                                        {{ action.name | l }}
                                    </div>
                                </igx-drop-down-item>
                            </div>
                        </igx-drop-down>

                        <div class="overlayOutlet action-dropdown-overlay" igxOverlayOutlet #outlet="overlay-outlet"></div>

                    </ng-template>
                </igx-column>
            </ng-container>

        </igx-grid>

as you can see, in row 4 i am using my custom paginator component. 

If i use the component like this, the grid will not show any pagination. If i use my component outside of the grid, it shows the paginator.

Is there any way i can make this work? Thanks for your help.