title: Dynamically Add tabPanel to tabView in PrimeNg
body: <p>I wanted to have a 'Add Tab' button, on clicking that button i want to add a new Tab(tabPanel) to existing list of tabView.
  Till now i am able to achieve the addition of new tab on clicking a 'Add Tab' button but i am not sure how to add the dynamic html content to the tab.</p>
  
  <p>appComponent.html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button pButton (click)="addTab()" label="selected header"&gt;&lt;/button&gt;
  &lt;p-tabView (onChange)="onChange($event)" [activeIndex]="selectedIndex"&gt;
    &lt;p-tabPanel header="first" [selected]="true"&gt;
      Hello1
    &lt;/p-tabPanel&gt;
    &lt;p-tabPanel header="second" cache="false"&gt;
      hello2
    &lt;/p-tabPanel&gt;
  &lt;/p-tabView&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>app.component.ts</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>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);
    }
  }</code></pre>
  </div>
  </div>
  </p>