chore(*): Extract pinned rows in re-usable template.

Author: MKirova

projects/igniteui-angular/src/lib/grids/grid/grid.component.html

@@ -108,16 +108,20 @@
         <span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length > 0"
             [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
             class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
-        <div #pinContainer *ngIf='pinnedRecords.length > 0 && isRowPinningToTop' class='igx-grid__tr--pinned igx-grid__tr--pinned-top'>
+        <ng-template #pinnedRecordsTemplate>
             <ng-container *ngFor="let rowData of pinnedRecords
-            | gridTransaction:id:pipeTrigger
-            | visibleColumns:hasVisibleColumns
-            | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger
-            | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger
-            | gridDetails:hasDetails:expansionStates:pipeTrigger; let rowIndex = index">
+                | gridTransaction:id:pipeTrigger
+                | visibleColumns:hasVisibleColumns
+                | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger
+                | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger
+                | gridDetails:hasDetails:expansionStates:pipeTrigger; let rowIndex = index">
                 <ng-container *ngTemplateOutlet="getRowTemplate(rowData); context: getContext(rowData, rowIndex, true)">
                 </ng-container>
             </ng-container>
+        </ng-template>
+        <div #pinContainer *ngIf='pinnedRecords.length > 0 && isRowPinningToTop' class='igx-grid__tr--pinned igx-grid__tr--pinned-top'>
+            <ng-container *ngTemplateOutlet="pinnedRecordsTemplate">
+            </ng-container>  
         </div>
         <ng-template igxGridFor let-rowData [igxGridForOf]="data
         | gridTransaction:id:pipeTrigger
@@ -144,15 +148,8 @@
             </ng-template>
         </ng-template>
         <div #pinContainer *ngIf='pinnedRecords.length > 0 && !isRowPinningToTop' class='igx-grid__tr--pinned igx-grid__tr--pinned-bottom' [style.bottom.px]='pinnedBottom'>
-            <ng-container *ngFor="let rowData of pinnedRecords
-            | gridTransaction:id:pipeTrigger
-            | visibleColumns:hasVisibleColumns
-            | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger
-            | gridSort:sortingExpressions:sortStrategy:id:pipeTrigger
-            | gridDetails:hasDetails:expansionStates:pipeTrigger; let rowIndex = index">
-                <ng-container *ngTemplateOutlet="getRowTemplate(rowData); context: getContext(rowData, rowIndex, true)">
-                </ng-container>
-            </ng-container>
+            <ng-container *ngTemplateOutlet="pinnedRecordsTemplate">
+            </ng-container>   
         </div>
         <ng-template #record_template let-rowIndex="index" let-rowData>
             <igx-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" #row>