Dynamic rendering of Tabs is not working

[apallamreddy]

Describe the bug
we are displaying the tabs when user option it(button click ) we are updating array with new value(array size will increase) for the first time tab loop is rendering immediately and tab is displaying immediately in uI side

when user option for second time(button click) we are updating array with new values(array size will increase) but the tab(loop) is not rendering in uI side when array is updated also with new values (array length increase ) when we click 3th time or on clicking first tab the new lee added tab is displaying

Expected behavior
the loop should render immediately when array is updated and new lee add tab should display
Screenshots
I have attached the screen of the code we have implemented

Additional context
Add any other context about the problem here.

Add labels
Add any applicable label like the concerned components or the target version of the fwk where the bug has been found.

[aweell]

Hi @apallamreddy,

Since this is not related to the design guidelines and in order to transfer the issue to the correct repository, can you please provide the technology you're using? Angular or React?

[apallamreddy]

Hi @aweell
It is Angular CDK

[aweell]

Thanks @apallamreddy!

I transfer the issue to the Angular repository 👉🏼

[Kanhaya-DXC]

Actually this is Tab UI component related issue and it required in our application urgently and because of this issue we are stuck so may i know any update about this issue?

[mawelCaballero]

We are working on that. we will fix it ASAP

[mawelCaballero]

Hello @Kanhaya-DXC , the add tabs dynamically feature has been added to tabs component.
Check the example in halstack-angular site or access directly to
https://codesandbox.io/s/addtabsdynamically-n1fcj?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2Fapp.component.html&theme=dark

This feature is currently in latest (next) version. It will be included in the next release.

[mchaudhary5]

Please provide date by when next release will be available which includes this fix.

[mawelCaballero]

This is available in 3.0.3.

[apallamreddy]

Hi @mawelCaballero ,
We have updated the Version to 3.0.4 and try to implement the dynamic tabs rendering as it is in cdk component we are unable to implement we are getting straight line that all i have attached the screen of code we have implement

[mawelCaballero]

This is the same example in codesandbox using latest release version of halstack-angular.
https://codesandbox.io/s/addtabsdynamically-n1fcj?fontsize=14&hidenavigation=1&module=/src/app/app.component.html&theme=dark&file=/src/app/app.component.ts
And its working as expected.

[mawelCaballero]

In case of updating to the latest version previously commented and still is not working. Can you share with us a repository and we can have a look at this?
Thanks in advance.

[apallamreddy]

Hi @mawelCaballero ,
we created one test env to replicate this issue You can clones the development branch from below git repo ones done run npm install and ones done run ng serve ones application open you can see the issue it showing only straight line. Not any tabs

https://github.dxc.com/apallamreddy/diaas-web-starter/tree/development

[mawelCaballero]

I have had a look at your source code and there is no problem related to the "dxc-tabs" component.
In the examples on the dxc-halstack angular website there is a subtle difference and that is that the dxc-tabs component only contains dxc-tab components.

Your code:

<div theme>
    <dxc-tabs margin="small">
        <div >
            <dxc-tab [label]="currenttab.id" *ngFor="let currenttab of (tabs | async); let i = index;">
                <div id="content1">{{currenttab.content}}</div>
            </dxc-tab>
        </div>
    </dxc-tabs>
    <dxc-button label="Add new tab" (click)="addMoreTabs()"></dxc-button>
</div>

How it has to be:

<div theme>
    <dxc-tabs margin="small">
            <dxc-tab [label]="currenttab.id" *ngFor="let currenttab of (tabs | async); let i = index;">
                <div id="content1">{{currenttab.content}}</div>
            </dxc-tab>
    </dxc-tabs>
    <dxc-button label="Add new tab" (click)="addMoreTabs()"></dxc-button>
</div>