chore(*): Update header templates.

Author: MKirova

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

@@ -19,7 +19,8 @@
     [hasMRL]="hasColumnLayouts"
     [activeDescendant]="activeDescendant"
     [width]="calcWidth"
-    [pinnedColumnCollection]="pinnedColumns"
+    [pinnedStartColumnCollection]="pinnedStartColumns"
+    [pinnedEndColumnCollection]="pinnedEndColumns"
     [unpinnedColumnCollection]="unpinnedColumns"
     (keydown.meta.c)="copyHandler($event)"
     (keydown.control.c)="copyHandler($event)"

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

@@ -5,11 +5,11 @@
     <div class="igx-grid__tr" role="row" [style.width.px]="width">
 
         <!-- Left column moving area -->
-        @if (grid.moving && grid.columnInDrag && pinnedColumnCollection.length <= 0) {
+        @if (grid.moving && grid.columnInDrag && pinnedStartColumnCollection.length <= 0) {
             <span id="left" class="igx-grid__scroll-on-drag-left" droppable="true" [style.left.px]="grid.pinnedStartWidth"
                 [igxColumnMovingDrop]="headerContainer"></span>
         }
-        @if (grid.moving && grid.columnInDrag && pinnedColumnCollection.length > 0) {
+        @if (grid.moving && grid.columnInDrag && pinnedStartColumnCollection.length > 0) {
             <span id="left" class="igx-grid__scroll-on-drag-pinned" droppable="true" [style.left.px]="grid.pinnedStartWidth"
                 [igxColumnMovingDrop]="headerContainer"></span>
         }
@@ -61,8 +61,8 @@
         }
 
         <!-- Pinned columns collection from the start -->
-        @if (pinnedColumnCollection.length && grid.isPinningToStart) {
-            @for (column of pinnedColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {
+        @if (pinnedStartColumnCollection.length) {
+            @for (column of pinnedStartColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {
                 <igx-grid-header-group
                     [ngClass]="column.headerGroupClasses"
                     [ngStyle]="column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger"
@@ -92,8 +92,8 @@
         </ng-template>
 
         <!-- Pinned columns collection at the end -->
-        @if (pinnedColumnCollection.length && !grid.isPinningToStart) {
-            @for (column of pinnedColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {
+        @if (pinnedEndColumnCollection.length) {
+            @for (column of pinnedEndColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {
                 <igx-grid-header-group
                     [ngClass]="column.headerGroupClasses"
                     [ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger"

projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.ts

@@ -44,9 +44,14 @@ export class IgxGridHeaderRowComponent implements DoCheck {
     @Input()
     public grid: GridType;
 
-    /** Pinned columns of the grid. */
+    /** Pinned columns of the grid at start. */
     @Input()
-    public pinnedColumnCollection: ColumnType[] = [];
+    public pinnedStartColumnCollection: ColumnType[] = [];
+
+    /** Pinned columns of the grid at end. */
+    @Input()
+    public pinnedEndColumnCollection: ColumnType[] = [];
+
 
     /** Unpinned columns of the grid. */
     @Input()

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

@@ -6,7 +6,8 @@
     [hasMRL]="hasColumnLayouts"
     [activeDescendant]="activeDescendant"
     [width]="calcWidth"
-    [pinnedColumnCollection]="pinnedColumns"
+    [pinnedStartColumnCollection]="pinnedStartColumns"
+    [pinnedEndColumnCollection]="pinnedEndColumns"
     [unpinnedColumnCollection]="unpinnedColumns"
     (keydown.meta.c)="copyHandler($event)"
     (keydown.control.c)="copyHandler($event)"

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

@@ -267,8 +267,8 @@
             }
 
             <!-- Pinned columns collection from the start -->
-            @if (pinnedColumnCollection.length && grid.isPinningToStart) {
-                @for (column of pinnedColumnCollection | igxTopLevel; track column) {
+            @if (pinnedStartColumnCollection.length) {
+                @for (column of pinnedStartColumnCollection | igxTopLevel; track column) {
                     <igx-grid-header-group [ngClass]="column.headerGroupClasses"
                         [ngStyle]="column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger" [column]="column"
                         [style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
@@ -299,8 +299,8 @@
             </div>
 
             <!-- Pinned columns collection at the end -->
-            @if (pinnedColumnCollection.length && !grid.isPinningToStart) {
-                @for (column of pinnedColumnCollection | igxTopLevel; track column) {
+            @if (pinnedEndColumnCollection.length) {
+                @for (column of pinnedEndColumnCollection | igxTopLevel; track column) {
                     <igx-grid-header-group [ngClass]="column.headerGroupClasses"
                         [ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger" [column]="column"
                         [style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"

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

@@ -5,7 +5,8 @@
     [hasMRL]="hasColumnLayouts"
     [activeDescendant]="activeDescendant"
     [width]="calcWidth"
-    [pinnedColumnCollection]="pinnedColumns"
+    [pinnedStartColumnCollection]="pinnedStartColumns"
+    [pinnedEndColumnCollection]="pinnedEndColumns"
     [unpinnedColumnCollection]="unpinnedColumns"
     (keydown.meta.c)="copyHandler($event)"
     (keydown.control.c)="copyHandler($event)"