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

<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?