How to add split panel dynamically in primeNg p-splitter?

Question

<p-button label="Add" (click)="onAddPanel()"></p-button>
 <p-splitter [style]="{'height': '100px'}" styleClass="p-mb-5">
  <ng-container  *ngFor="let panel of panels">
    <ng-template pTemplate>
      <div class="p-col p-d-flex p-ai-center p-jc-center">
          {{panel.name}}
      </div>
    </ng-template>
  </ng-container>
</p-splitter>

panels = [ {name: 'Panel1'}, {name: 'Panel2'}, {name: 'Panel3'} ];

onAddPanel() {
    this.panels = [...this.panels, ...[{name: `Panel${this.panels.length+1}`}] ];
}

How to make the p-splitter bind to the new collection and add a panel when onAddPanel event is fired? I tried it with “primeng”: “12.0.0” with no success. Has anybody any workaround?

Artema

Answer 1

You could do this

@Component({
  selector: 'my-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.scss'],
})
export class MyComponent {
  @ViewChild('splitter') splitterRef!: Splitter;
  
  items = ["Hello"]
  
  updatePanel() {
    items.push("World");
    this.splitterRef.panels = [];
    setTimeout(() => {
      this.splitterRef.ngAfterContentInit();
      this.splitterRef.cd.detectChanges();
    }, 0);
  }
}

<p-splitter
  panelStyleClass="w-screen"
  #splitter
>
  <ng-container *ngFor="let item of items">
    <ng-template pTemplate="panel">
      {{ item }}
    </ng-template>
  </ng-container>
</p-splitter>
<button onClick="updatePanel()">Update Panel</button>

Fumatorium