p-splitter: dynamic update of panelSizes should trigger rerender

[Zukzuk]

Describe the feature you would like to see added

The primeNG Splitter component offers the 'panelSizes' property. The value unfortunately is only evaluated on initialization of the component. I would like to request a change so I can dynamically resize the template by updating the value of the panelSizes property.

Is your feature request related to a problem?

My problem is that I am about to offer a feature in which I want to be able to dynamically choose the size of my panel layout. Right now I can't do that with the Splitter, although I feel like I should be able to.

Describe the solution you'd like

import { Component } from '@angular/core';
@Component({
    selector: 'splitter-horizontal-demo',
    template: '
    <p-button (click)="toggleSecondary()">Toggle Secondary</p-button>
    <p-splitter [panelSizes]="panelSizes" [minSizes]="minSizes">
        <ng-template pTemplate>
            <div>Panel 1</div>
        </ng-template>
        <ng-template pTemplate>
            <div *ngIf="isSecondaryActive">Panel 2</div>
        </ng-template>
    </p-splitter>
    '
})
export class SplitterHorizontalDemo {
  isSecondaryActive!: boolean;
  panelSizes: number[] = [100, 0];
  minSizes: number[] = [50, 0]

  toggleSecondary() {
    this.isSecondaryActive = !this.isSecondaryActive;
    if (this.isSecondaryActive) ? [50, 50] : [100, 0]
  }
}

Describe alternatives you have considered

Creating my own Splitter in html/css/ts. I don't like this option since I have a complete component lib called PrimeNG ;)

Additional context

No response

[cetincakiroglu]

Hi,

Just a guess, this enhancement might be done by using Angular Signals easily.

[AnilBabu-TMMC]

I used ngFor to create panels by iterating an array, Now I want to delete panels dynamically. I tried to delete it from this array, but the UI is not updated. However, Dynamic Addition is working.

[nchaigne]

I was looking for this feature also... guess it's not possible then.

[chrisbrugger]

Sad to see this is not already a feature. Did someone of you find another way to trigger a rerender?

[MrLoba81]

@chrisbrugger Try to set a ViewChild reference on the p-splitter and call detectChanges() on the ChangeDetectorRef. For me it worked, I know it's not the best/right way, but it does the job :)

@ViewChild('splitter') splitterRef: Splitter; ...perform addition/deletion on the pnels array of the Splitter... setTimeout(() => { this.splitterRef.cd.detectChanges(); });

[cheekrm]

Unfortunately, the @ViewChild approach with calling detectChanges on the splitters didn't work for me. For anyone else that might come across this issue, I simply bound a boolean variable to an *ngIf in the splitter and toggled it as updates were coming in using setTimeout. Hope this helps!

Template:

<p-splitter *ngIf="splitterRerenderHack" [panelSizes]="panelSizeArray">
    <ng-container *ngFor="let panel of panelSizeArray">
        <ng-template pTemplate>
            content
        </ng-template>
    </ng-container>
</p-splitter>

Component:

panelSizeArray = this.someSignalStore.panelSizeArray;
splitterRerenderHack = true;

constructor() {
    effect(() => {
        this.panelSizeArray = this.someSignalStore.panelSizeArray;
        this.splitterRerenderHack = false;
        setTimeout(() => {
            this.splitterRerenderHack = true;
        });
    });
}