I am creating tabs using ng-bootstrap's nav tabs, If there are multiple tabs having child components defined under ng-template. I want to access those child components instances with the help of viewchild at one time to create payload data If I am trying to fetch child component's function or variable using viewchild it will gives undefined
<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs" (navChange)="onTabSelect($event)" #staticTabs>
<li #ComponentLevelTagTab [ngbNavItem]="1">
<a ngbNavLink>
<span>Component Tag</span>
</a>
<ng-template ngbNavContent>
<div class="mt-1">
<label class="content-header">{{ 'Component type' | translate}}: </label>
<wj-combo-box #WjComponentAndSubtypesList [clickAction]="'Open'"
[itemsSource]="componentAndSubtypesList" [isRequired]="true" [displayMemberPath]="'DisplayName'"
[selectedValuePath]="'Name'" [placeholder]="'Select component type' | translate"
[selectedValue]="selectedBusinessObject"
(selectedIndexChanged)="selectComponent(WjComponentAndSubtypesList)"></wj-combo-box>
</div>
<in-content-tagging-grid #componentTaggingGridElement (selectedTab)="selectedTab"
(editTag)="editTag($event)" (selectActiveTag)="selectActiveTag($event)"></in-content-tagging-grid>
</ng-template>
</li>
<li #StandardContentTagTab [ngbNavItem]="2">
<a ngbNavLink>
<span>Content Tag</span>
</a>
<ng-template ngbNavContent>
<in-content-tagging-grid #standardContentTaggingGridElement (selectedTab)="selectedTab"
(editTag)="editTag($event)" (selectActiveTag)="selectActiveTag($event)"></in-content-tagging-grid>
</ng-template>
</li>
</ul>
<div [ngbNavOutlet]="nav" class="mt-2"></div>
want to access this._componentTaggingGridElement and this._standardContentTaggingGridElement at a time while creating payload