Problem with Nested Tabs in CoreUI Angular

[oarque]

When trying to implement nested tabs in an Angular component using CoreUI Angular's c-tabs and c-tab-panel, the second-level tabs are not working as expected. Specifically:

When clicking on a top-level tab (first level), the nested tabs (second level) appear, but the content of the first nested tab (second level) does not load automatically. After clicking on another nested tab (second level) and then switching back to the first nested tab, the content is displayed correctly.

<c-tabs [activeItemKey]="0">
    <c-tabs-list>
        <button cTab [itemKey]="0">Tab1</button>
        <button cTab [itemKey]="1">Tab2</button>
    </c-tabs-list>
    <c-tabs-content>
        <c-tab-panel class="p-3" [itemKey]="0">
            <c-tabs [activeItemKey]="0">
                <c-tabs-list variant="pills">
                    <button cTab [itemKey]="0">Home</button>
                    <button cTab [itemKey]="1">Profile</button>
                </c-tabs-list>
                <c-tabs-content>
                    <c-tab-panel class="p-3" [itemKey]="0">
                        <strong>Home</strong> tab content
                    </c-tab-panel>
                    <c-tab-panel class="p-3" [itemKey]="1">
                        <strong>Profile</strong> tab content
                    </c-tab-panel>
                </c-tabs-content>
            </c-tabs>
        </c-tab-panel>
        <c-tab-panel class="p-3" [itemKey]="1">
            <strong>Profile</strong> tab content
        </c-tab-panel>
    </c-tabs-content>
</c-tabs>

[xidedix]

@oarque We’re not quite sure what layout you have in mind. Could you please attach a screenshot for reference?

[xidedix]

@oarque Please try to import provideAnimationsAsync from @angular/platform-browser/animations/async and add it to the providers list in the bootstrapApplication function call.

See working example here https://stackblitz.com/edit/coreui-angular-tabs-as228v-2bwzdm-6cmeqg?file=src%2Fmain.ts