[Tabs] Ability to hide tabs header

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.