Get TabPanel Content on Click

[littleraeofsun]

I have a PrimeNG TabView setup like this (where all child components inherit HelpKeyComponent with an input property of helpKey):

Code: Select all

<p-tabview (onClicked)="onTabClicked($event)">
   <p-tabPanel>
      <my-first-component helpKey="FirstHelpKey"></my-first-component>
   <p-tabPanel>
   <p-tabPanel>
      <my-second-component helpKey="SecondHelpKey"></my-second-component>
   <p-tabPanel>
   <p-tabPanel>
      <my-third-component helpKey="ThirdHelpKey"></my-third-component>
   <p-tabPanel>
</p-tabView>

I need to access the TabPanel content when a Tab is clicked so that I can access properties on the child component. Currently I have it working with each child component defined as a @ViewChild and a large switch statement on the clicked tab header to pick out the correct child, but I was hoping to find a more programmatic way of doing this. Something like this:

Code: Select all

@ViewChildren(TabPanel) tabPanels: QueryList<TabPanel>;
...
onTabClicked(event: any) {
   const clickedTab = this.tabPanels.filter((element, index) => index === event.index)
   setHelpKey((clickedTab.content as HelpKeyComponent).helpKey);
}

Any thoughts on how I can do this?