Hi,
working on my first project with TypeScript and Ignite UI for Angular and successfully using some components and moving forward till now.
But by using IgxTabs I've now reached a point where I can't get any further and have no more ideas how to solve my requirement.
I would like to display certain tabs and hide others using a state variable. As soon as the state variable changes, the corresponding tabs should be shown or hidden. My problem is how can I achieve to hide or show tabs at "runtime" - even if it's programmatically.
Hope some one can help.
THX!
Hello Hazim,
Thank you for posting in our community!
I have been looking into your question and what I could suggest is using the NgIf directive in order to conditionally hide/show the IgxTabs items.
For example:
public toggle: boolean = false;
<button igxButton (click)="toggle = !toggle">Toggle</button> <igx-tabs> <igx-tab-item *ngIf="toggle"> <igx-tab-header> <span igxTabHeaderLabel>Albums</span> </igx-tab-header> <igx-tab-content> Albums </igx-tab-content> </igx-tab-item> ... </igx-tabs>
Here could be found a small sample that demonstrates my suggestion.
Please test it on your side and let me know if you need any further assistance regarding this mater.
Looking forward to your reply.
Sincerely, Riva Ivanova Software Developer
Hi Riva,
Thanks for your answer and example. I could verify that it works now!
Looks liks that I did a mistake before because I tried the *ngIf before without success - anyway.
Best regardsHazim
I am glad that you find my suggestion helpful.
Thank you for using Infragistics components.
Regards, Riva Ivanova Software Developer