Hi people, the problem I am facing is that I'm not being able to insert a closable button inside igx-tab-item label. What I need to do is implement tabs with the following rules:
With the default igx-tab-item I've managed to create tabs based on an array, and could attach routes to tabs, so when a tab is clicked it navigates to the corresponding route, and when I navigate to a new route has not a corresponding tab, this tab is created and selected. But my problem is with the rule number 3. With the following code I could achieve what has been said.
tab.html
tab.ts (Creates a tab based in current url, get All tabs that already was defined, if the current tab doesn't exist, creates the current tab, and then select the current tab.)
So than I've managed to use IgxTabItemTemplate directive to give me a custom label template, but it gave me some problems that seems to be really difficult to deal with.
I've made the following changes:
tab.ts (the variable tabsComponent is the ViewChild reference for #tabsComponent)
The problems I'm facing with the IgxTabs with custom label template is with activating the routerLink to tabs, I've tried to use tabsComponent.onTabItemSelect but this observable is activated two times in all route transitions, what made me spent much time trying to resolve this. Also, I'm facing problems to control the isSelected property in this approach.
So my question is how I can implement igxTabs with the 3 rules mentioned before? PS: The documentation is not so explained about this section, I suggest you to make sample with routerLinks and handling the isSelect property and to attach to the documentation,
PS2: If the default igxTabItem could receive a HTML would be helpful too.
Hello Gabriel,
I have modified our Integration With Router Outlet Container sample to re-template the igx-tab-item like this:
Here is the stackblitz.
Let me know if I may be of any further assistance.
Sincerely,Diyan DimitrovSenior Software Developer
Hello Diyan, thanks for the response. Now I could make the tabs with a closable button works properly. Thanks again,
Gabriel
I am glad to know that you were able to achieve the functionality you were aiming for.