<mat-tab> Hide and Show Feature

[mahivitsit]

Bug, feature request, or proposal:

hide/show behavior need to Provide in future release. #### What is the expected behavior? wanted to hide/show tab. #### What is the current behavior? currently you ppl are providing disabled feature so i wanted to hide/show tab. #### What are the steps to reproduce? provide api include hide/show feature. #### What is the use-case or motivation for changing an existing behavior? i need to show/hide tabs for that i need this feature instead of disabled api. #### Which versions of Angular, Material, OS, TypeScript, browsers are affected? i have used angular5 and Material design 5.2. please go through the below link for your reference. https://material.angular.io/components/tabs/api #### Is there anything else we should know? apart from disable tab everything is working fine.

[mahivitsit]

Please provide this feature ASAP.

[gise88]

Why don't simply use an *ngIf?

[mahivitsit]

Why don't simply use an *ngIf?

if i use *ngIf it doesn't work for that is why i need show/hide feature instead of disabled.

[josephperrott]

As mentioned above, you should be able to include or remove a tab using ngIf can you expand on a case where this does not work?

[LukasStordeur]

I would love to see this feature to. Because when I use ngIf, it disapears from the DOM, and in the case I use a navigate to tab in case the user click on the button, when using more than 1 tab, the navigation won't work like expected, because ngIf had the tabs removed.

In my case I'm using the tabs as update forms. They are displayed only if the user clicks on the update button. But when I'm having two different sort buttons that are linked to an index of the tab, then the setValue for the selected tab won't work correctly, it will indeed swipe to the tab with the index, but because the other tabs are removed from the DOM, they won't count. I use workarounds to navigate to the wanted tabs, but that's a lot of if and else for the achievement.

[florianraffl]

I faced the same problem on my Angular project. I also used the material tabs and if I tried to hide a tab using *ngIf.

In this small test project I just tried to figure the problem out: https://stackblitz.com/edit/angular-pbybg8 It will show correctly only one tab (because the checkbox is unchecked and so the result inside ngIf is false). But if i now check the checkbox the result inside ngIf will be true but the tab won't appear. If you invert the "load result" in *ngIf to true it will appear at start but if you uncheck the checkbox it won't disappear. Funny side note: If you add an event handler like (click) or (change) to the checkbox everything works fine! But in my case this won't solve the problem.

[LukasStordeur]

Hi, Wel actually I solved it with a switch case that goes through the different possibilities. It will calculate the index for the tab that's shown. It's really hacky but it worked for my case.

Télécharger Outlook pour Androidhttps://aka.ms/ghei36

---

From: florianraffl notifications@github.com Sent: Wednesday, March 6, 2019 5:30:59 PM To: angular/material2 Cc: LauraStordeur; Comment Subject: Re: [angular/material2] Hide and Show Feature (#14227)

I faced the same problem on my Angular project. I also used the material tabs and if I tried to hide a tab using *ngIf.

In this small test project I just tried to figure the problem out: https://stackblitz.com/edit/angular-pbybg8 It will show correctly only one tab (because the checkbox is unchecked and so the result inside ngIf is false). But if i now check the checkbox the result inside ngIf will be true but the tab won't appear. If you invert the "load result" in *ngIf to true it will appear at start but if you uncheck the checkbox it won't disappear. Funny side note: If you add an event handler like (click) or (change) to the checkbox everything works fine! But in my case this won't solve the problem.

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/angular/material2/issues/14227#issuecomment-470176505, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AqDiAp9GPNjy9UqJsvoT_LG3LpPxhtmLks5vT-1DgaJpZM4YtJHv.

[florianraffl]

Hi, that won't work in my case because i need more tabs with different conditions. But thanks for your answer :)

[bambithedeer]

Another reason for having this feature is that ngIf loads the tab on demand so in my case I have a set of expansion panels in the "hidden" tab that load expanded in the tab switch animation and then collapse again once finished. If there was a hide/show feature, the tab would be loaded when the tab set loads and showing it would not go through this loading process. I have tried setting the hidden attribute but that doesn't seem to affect mat tabs.

[jschank]

I too, would like to have this feature.

[zunaid2998]

any update on this feature!

[CraigWarford]

This worked well for me:

<mat-tab-group
  (selectedTabChange)="selectTab($event)"
  [selectedIndex]="activeTab"
  [ngClass]="{'class-hide-tab0': hideTab0Flag}">
  <mat-tab label="Tab0"></mat-tab>
  <mat-tab label="Tab1"></mat-tab>
  <mat-tab label="Tab2"></mat-tab>
</mat-tab-group>

with CSS:

.class-hide-tab0 div.mat-tab-label:nth-child(1) {
  display: none;
}

This preserved the indexing structure underneath, so that I could still reference the same tab by either index or name.

[sundaramoorthyjeeva]

"hideTab0Flag" In which event we need to update this flag ? Please share more info on this flag.

[agiratech-vigneshm]

"hideTab0Flag" In which event we need to update this flag ? Please share more info on this flag.

That depends on when you want to show or hide the tab right?

[CraigWarford]

"hideTab0Flag" In which event we need to update this flag ? Please share more info on this flag.

That's just a boolean variable from the code behind. You set it whenever/wherever you want, or you could even add a function to return a boolean true/false.

[ferrusca]

I had a lot of tabs to display / hide, so creating a CSS class for each tab wasn't the best option for me.

Also, I wanted to preserve the index order to navigate between tabs. This worked for me using js:

displayOrHideTab(tabIndex: number, displayTab: boolean): void {
  const tabHeaders = document.querySelectorAll('.mat-tab-label');
  if (tabHeaders[tabIndex]) {
    (tabHeaders[tabIndex] as HTMLElement).style.display = displayTab ? 'inherit' : 'none';
  }
}

And then, to hide any tab:

this.displayOrHideTab(3, false);

Keep in mind to call this function not before ngAfterViewInit(), as the tabs are not created yet.

[intellix]

Remember to +1 (thumbs up) the original post as it can be used for sorting important/popular feature requests.

It would be nice if even classes/ngClass applied to the tab/header that were added so we could achieve this ourselves:

<mat-tab [class.hidden]="tab.hidden" *ngFor="let tab of tabs">
  ...
</mat-tab

I've found a hack which allows this without JS:

<mat-tab *ngFor="let tab of tabs" [aria-labelledby]="tab.hidden ? 'hidden' : ''">
  ...
</mat-tab>

.mat-tab-label[aria-labelledby='hidden'] {
  display: none;
}

[Ediison]

Thanks you @intellix for your solution. But I changed the css

.mat-tab-label[aria-labelledby='hidden'] {
        //display: none;
        width: 0px !important;
        min-width: 0px;
        padding:  #0px;
    }

[cfoxy17]

All, I've found a solution that actually works - it uses *ngTemplateOutlet to wrap the same code in a mat tab if the length is > 1. If the length of your data is 1 it makes no sense to have there be a visible mat tab, so this fixes that:

`

<ng-container *ngIf="this.yourData.length > 1">

    <mat-tab-group dynamicHeight animationDuration="0ms" disableRipple="true">

        <ng-container *ngFor="let item of yourData;"> 

            <mat-tab label="{{item.someAttribute}}">

                <ng-container *ngTemplateOutlet="CommonCode"></ng-container>

            </mat-tab>

        </ng-container>

    </mat-tab-group>

</ng-container>

<ng-container *ngIf="this.yourData.length == 1">

    <ng-container *ngFor="let item of yourData;"> 

        <ng-container *ngTemplateOutlet="CommonCode"></ng-container>

    </ng-container>

</ng-container>

<ng-template #CommonCode>

    YOUR CODE HERE

</ng-template>

`