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]

duplicate of #209