Components: [Tabs] Ability to hide tabs header

[faisalmuhammad]

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

The mat-tab-group should expose a property using which the header can be hidden. Setting the property to true should hide the header of the mat-tab-group.

What is the current behavior?

At the moment. in order to hide the header, I have to override the default styles of the class ".mat-tab-header" and set the display property to none along with setting component's encapsulation to encapsulation: ViewEncapsulation.None. Given below is an example how I am currently hiding the tab header:

CSS Styles

.header-less-tabs.mat-tab-group .mat-tab-header {
  display: none;
}

TypeScript

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent  { 
}

Html Template

<mat-tab-group class="header-less-tabs">
  <mat-tab label="Tab 1">Content 1</mat-tab>
  <mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>

What are the steps to reproduce?

Here is a link to StackBlitz Demo of what I am looking to achieve.

What is the use-case or motivation for changing an existing behavior?

I have an app where I am loading different contents/sections inside the mat-tab-group, and I am using a sidebar with the buttons to navigate. Also, the navigation happens from inside any tab. I do not have any routes in the app, so using "mat-tab-nav-bar" is not an option.

[simeyla]

I would very much like this feature too.

I have a list of products categories and only some have sub categories.
I am displaying the products in a sub category in a tab control, but when there is only a single sub category I don't want to display the tab control header. Would be much simpler template if I had this property.

[weilip1803]

Is this feature going to be added anytime soon?

[andystroz]

Is this feature going to be added sometime? or has anyone figured out a workaround to hide it?

[Sjonnie2nd]

@andystroz
faisalmuhammad's example on StackBlitz is pretty straightforward.
I used it like this:

In styles.css:
.header-less-tabs .mat-tab-group .mat-tab-header { display: none; }

In the template:
<div [ngClass]="{ 'header-less-tabs': formTabs.length === 1}">
--- <mat-tab-group ...>
--- </mat-tab-group>
</div>

where formTabs is an array variable in my component.

[simeyla]

Really wish some of these 'low priority' tasks that should be simple to implement could be prioritized more highly :-/

[stasberkov]

Please implement this feature. It will allow using mat-tab-group as missing carousel control (from bootstrap).

[philip-firstorder]

length

Even simpler without the need of the extra wrapper or the component variable:

In styles.css:
.header-less-tabs .mat-tab-header { display: none; }

In the template:
<mat-tab-group #matTabGroup [class.header-less-tabs]="matTabGroup._tabs.length <= 1">

[lucas-entronic]

Lending my voice to the crowd, lest this issue fall victim to the auto-close.

Tabs are awesome, and like others here, I am looking to separate the tab header from the tab group or hide it completely, so I can use tabs for navigation where routing is not possible.

[phillipe-barbosa]

Yeah, this feature would be really cool!!

[rramsey]

I'd like to not only hide the tab group, I'd like to hide a specific matTabLabel.

By hiding a label, you could still navigate to the content via button somewhere else and you'd get all of the nice slide in/slide out effects for free.

Should that be a separate feature request?

[jmagaram]

Agree. I'd like a multi-step process without the tab labels but with all the cool animations built-in. I've got a sign-in page with three phases: (1) enter your email (2) wait for email to be sent, like a big progress ring, (3) done, go check your email.

[Avramo]

Thanks for bringing this up! I found this after hours of searching...

here's how I did it:
add this to the css file and presto!

::ng-deep .mat-tab-group > .mat-tab-header{ display: none; }