Access the child component residing under ng-template with ViewChild in Angular while using ng-bootstrap

110 Views Asked by At

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}}: &nbsp;</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

0

There are 0 best solutions below