Динамически добавить tabPanel в tabView в PrimeNg - PullRequest
Новая
       11

Динамически добавить tabPanel в tabView в PrimeNg

1 голос
/ 08 марта 2019

Я хотел иметь кнопку «Добавить вкладку», при нажатии на эту кнопку я хочу добавить новую вкладку (tabPanel) в существующий список tabView. До сих пор я смог добиться добавления новой вкладки при нажатии кнопки «Добавить вкладку», но я не уверен, как добавить динамическое HTML-содержимое на вкладку.

appComponent.html 

<button pButton (click)="addTab()" label="selected header"></button>
<p-tabView (onChange)="onChange($event)" [activeIndex]="selectedIndex">
  <p-tabPanel header="first" [selected]="true">
    Hello1
  </p-tabPanel>
  <p-tabPanel header="second" cache="false">
    hello2
  </p-tabPanel>
</p-tabView>

app.component.ts 

import {Component, ViewChild, ViewContainerRef} from '@angular/core';
import {TabView, TabPanel} from 'primeng/primeng';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private viewContainerRef: ViewContainerRef) {
  }

  @ViewChild(TabView) tabView: TabView;

  addTab() {
    const tab: TabPanel = new TabPanel(this.viewContainerRef);
    tab.header = 'Tab3';
    tab.closable = true;
    this.tabView.tabs.push(tab);
  }
}
...