title: Build tabPanels Dynamically - primeNg
body: <p>I have first tab and i want to build the other tabs and tabPanels to existing list of tabView dynamically. And inside of each tabPanel i need to create a dynamic component callded LeadComponent. i have a problem to exist this component inside of tabPanel dynamically created.</p>
  <p>The second problem is that component gets updated in all leads.</p>
  <p>template.html</p>
  <pre><code>&lt;p-tabView #tabView styleClass=&quot;text-xs&quot; [scrollable]=&quot;true&quot; (onChange)=&quot;onChange($event)&quot;&gt;
    &lt;p-tabPanel header=&quot;List&quot; leftIcon=&quot;pi pi-list&quot;&gt;
          &lt;p-table [value]=&quot;leads&quot;&gt;
            &lt;ng-template pTemplate=&quot;body&quot; let-lead&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  &lt;a (click)=&quot;addTab(lead)&quot; class=&quot;text-primary cursor-pointer&quot;&gt;
                    {{lead.full_name}}
                  &lt;/a&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
            &lt;/ng-template&gt;
          &lt;/p-table&gt;
    &lt;/p-tabPanel&gt;
  &lt;/p-tabView&gt;
  
  </code></pre>
  <p>And here is my logic</p>
  <p>workspace.ts</p>
  <pre><code>import { TabView, TabPanel } from 'primeng/tabview';
  
  export class WorkspaceHomeComponent implements OnInit {
  
    @ViewChild('tabView') tabView!: TabView;
    leads!: any;
  
    constructor(private leadsService: LeadsService, private tabContent: ViewContainerRef) {}
  
  ngOnInit(): void {
      this.leadsService.getLeads().subscribe((leads) =&gt; {
        this.leads = leads;
      });
    }
  
    addTab(lead: any) {
      // Create Tab Panel Instance
      const tab: TabPanel = new TabPanel(this.tabView, this.tabContent, this.tabView.cd);
  
      // Set Tab Panel Properties
      tab.header = lead.full_name;
      tab.closable = true;
      tab.id = lead.id;
      tab.cache = false;
      tab.leftIcon = 'pi pi-user';
      tab.selected = true;
  
      // Create TabPanels Instance
      const queryList = new QueryList&lt;TabPanel&gt;(false);
      queryList.reset([...this.tabView.tabs]);
      this.tabView.tabPanels = queryList;
  
      // Add LeadComponent Dynamically
      this.tabContent.clear();
      const leadComponent = this.tabContent.createComponent(LeadComponent);
      leadComponent.setInput('lead', lead);
  
      // Push new dynamic tabs
      this.tabView.tabs.push(tab);
  
      // Add Active Index To Active Tab
      this.tabView.tabs.forEach((tab, i) =&gt; {
        tab.tabView.activeIndex = i;
      });
    }
  }
  
  </code></pre>