fix(igxSplitter): Assign pane props after zone is stable. (#15888)

Author: MayaKirova

projects/igniteui-angular/src/lib/splitter/splitter-pane/splitter-pane.component.ts

@@ -1,4 +1,4 @@
-import { Component, HostBinding, Input, ElementRef, Output, EventEmitter, booleanAttribute } from '@angular/core';
+import { Component, HostBinding, Input, ElementRef, Output, EventEmitter, booleanAttribute, signal } from '@angular/core';
 
 /**
  * Represents individual resizable/collapsible panes.
@@ -22,6 +22,7 @@ import { Component, HostBinding, Input, ElementRef, Output, EventEmitter, boolea
 export class IgxSplitterPaneComponent {
     private _minSize: string;
     private _maxSize: string;
+    private _order = signal<number | null>(null);
 
     /**
      * @hidden @internal
@@ -102,7 +103,12 @@ export class IgxSplitterPaneComponent {
 
     /** @hidden @internal */
     @HostBinding('style.order')
-    public order!: number;
+    public get order() {
+        return this._order();
+    }
+    public set order(val) {
+        this._order.set(val)
+    }
 
     /**
      * @hidden @internal

projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts

@@ -33,7 +33,7 @@ describe('IgxSplitter', () => {
         const secondPane = splitter.panes.toArray()[1].element;
         expect(firstPane.textContent.trim()).toBe('Pane 1');
         expect(secondPane.textContent.trim()).toBe('Pane 2');
-
+        fixture.detectChanges();
         const splitterBar = fixture.debugElement.query(By.css(SPLITTERBAR_CLASS)).nativeElement;
         expect(firstPane.style.order).toBe('0');
         expect(splitterBar.style.order).toBe('1');
@@ -322,6 +322,13 @@ describe('IgxSplitter', () => {
 
         expect(splitterBarComponent.style.transform).not.toBe('translate3d(0px, 0px, 0px)');
     });
+
+    it('should render correctly panes created dynamically using @for', () => {
+        fixture = TestBed.createComponent(SplitterForOfPanesComponent);
+        fixture.detectChanges();
+        splitter = fixture.componentInstance.splitter;
+        expect(splitter.panes.length).toBe(3);
+    });
 });
 
 describe('IgxSplitter pane toggle', () => {
@@ -336,6 +343,7 @@ describe('IgxSplitter pane toggle', () => {
         fixture = TestBed.createComponent(SplitterTogglePaneComponent);
         fixture.detectChanges();
         splitter = fixture.componentInstance.splitter;
+        fixture.detectChanges();
     }));
 
     it('should collapse/expand panes', () => {
@@ -601,3 +609,19 @@ export class SplitterTogglePaneComponent extends SplitterTestComponent {
 })
 export class SplitterCollapsedPaneComponent extends SplitterTestComponent {
 }
+
+@Component({
+    template: `
+<igx-splitter>
+    @for (number of numbers; track number) {
+    <igx-splitter-pane>
+      <p>{{ number }}</p>
+    </igx-splitter-pane>
+    }
+  </igx-splitter>
+    `,
+    imports: [IgxSplitterComponent, IgxSplitterPaneComponent]
+})
+export class SplitterForOfPanesComponent extends SplitterTestComponent {
+    public numbers = [1, 2, 3];
+}

projects/igniteui-angular/src/lib/splitter/splitter.component.ts

@@ -1,6 +1,7 @@
-import { AfterContentInit, Component, ContentChildren, ElementRef, EventEmitter, HostBinding, HostListener, Inject, Input, Output, QueryList, booleanAttribute, forwardRef, DOCUMENT } from '@angular/core';
+import { AfterContentInit, Component, ContentChildren, ElementRef, EventEmitter, HostBinding, HostListener, Inject, Input, NgZone, Output, QueryList, booleanAttribute, forwardRef, DOCUMENT } from '@angular/core';
 import { DragDirection, IDragMoveEventArgs, IDragStartEventArgs, IgxDragDirective, IgxDragIgnoreDirective } from '../directives/drag-drop/drag-drop.directive';
 import { IgxSplitterPaneComponent } from './splitter-pane/splitter-pane.component';
+import { take } from 'rxjs';
 
 /**
  * An enumeration that defines the `SplitterComponent` panes orientation.
@@ -154,7 +155,7 @@ export class IgxSplitterComponent implements AfterContentInit {
      */
     private sibling!: IgxSplitterPaneComponent;
 
-    constructor(@Inject(DOCUMENT) public document, private elementRef: ElementRef) { }
+    constructor(@Inject(DOCUMENT) public document, private elementRef: ElementRef, private zone: NgZone) { }
     /**
      * Gets/Sets the splitter orientation.
      *
@@ -197,7 +198,9 @@ export class IgxSplitterComponent implements AfterContentInit {
 
     /** @hidden @internal */
     public ngAfterContentInit(): void {
-        this.initPanes();
+        this.zone.onStable.pipe(take(1)).subscribe(() => {
+            this.initPanes();
+        });
         this.panes.changes.subscribe(() => {
             this.initPanes();
         });
@@ -472,7 +475,7 @@ export class IgxSplitBarComponent {
      * @hidden @internal
      */
     public get prevButtonHidden() {
-        return this.siblings[0].collapsed && !this.siblings[1].collapsed;
+        return this.siblings[0]?.collapsed && !this.siblings[1]?.collapsed;
     }
 
     /**
@@ -559,7 +562,7 @@ export class IgxSplitBarComponent {
      * @hidden @internal
      */
     public get nextButtonHidden() {
-        return this.siblings[1].collapsed && !this.siblings[0].collapsed;
+        return this.siblings[1]?.collapsed && !this.siblings[0]?.collapsed;
     }
 
     /**
@@ -599,7 +602,7 @@ export class IgxSplitBarComponent {
 
     protected get resizeDisallowed() {
         const relatedTabs = this.siblings;
-        return !!relatedTabs.find(x => x.resizable === false || x.collapsed === true);
+        return !!relatedTabs.find(x => x?.resizable === false || x?.collapsed === true);
     }
 
     /**