Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Hazim Bayat
195
IgxTabs - Hide and show programmatically
posted

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!

Parents
  • 700
    Verified Answer
    Offline posted

    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

Reply Children