Nativescript-Angular BottomNavigation's TabContentItem in ngFor loop

Question

Is it possible to render TabContentItem's inside an ngFor loop in order to only use one TabContentItem and dynamically set the name property of a page-router-outlet like so: <page-router-outlet [name]="tab.name"></page-router-outlet>? I have a layout for BottomNavigation that has dynamic tabs and TabStripItem's, but hardcoded TabContentItem's and I would like to dynamically render those as well. Current code:

<BottomNavigation #bottomNavigation [selectedIndex]="currentTabIndex">
    <TabStrip backgroundColor="white">
        <TabStripItem *ngFor="let tab of tabs" class="special" (tap)="onTabStripItemTap(tab)">
            <Label [text]="tab.label" class="tab-label"></Label>
            <Image [src]="tab.icon" class="fas t-36 icon__color"></Image>
        </TabStripItem>
    </TabStrip>
    <TabContentItem>
        <page-router-outlet name="homeTab"></page-router-outlet>
    </TabContentItem>
    <TabContentItem>
        <page-router-outlet name="askTab"></page-router-outlet>
    </TabContentItem>
    <TabContentItem>
        <page-router-outlet name="topicsTab"></page-router-outlet>
    </TabContentItem>
    <TabContentItem>
        <page-router-outlet name="payCheckerTab"></page-router-outlet>
    </TabContentItem>
    <TabContentItem>
        <page-router-outlet name="safetyTab"></page-router-outlet>
    </TabContentItem>
    <TabContentItem>
        <page-router-outlet name="newsTab"></page-router-outlet>
    </TabContentItem>
    <TabContentItem>
        <page-router-outlet name="moreTab"></page-router-outlet>
    </TabContentItem>
</BottomNavigation>

The tabs property is an array of BottomNavigationTab's that include the exact names i.e., homeTab, askTab, etc.