How to implement angular material tabs with side buttons instead of tab header?

Question

Here is what I have - Tabs with header

And here is what I want - Tabs with side buttons

This is my code -

.html -

<div class="container">
  <button (click)="onPrev()">Prev</button>

  <mat-tab-group [(selectedIndex)]="tabSelect">

    <mat-tab label="First">
      <mat-grid-list cols="3" gutterSize="16px">
        <mat-grid-tile *ngFor="let x of [1,2,3]" class="mat-elevation-z2">
          {{x}}
        </mat-grid-tile>
      </mat-grid-list>
    </mat-tab>

    <mat-tab label="Second">
      <mat-grid-list cols="3" gutterSize="16px">
        <mat-grid-tile *ngFor="let x of [4,5,6]" class="mat-elevation-z2">
          {{x}}
        </mat-grid-tile>
      </mat-grid-list>
    </mat-tab>

  </mat-tab-group>

  <button (click)="onNext()">Next</button>
</div>

.ts -

export class AppComponent {
  tabSelect = 0;
  onPrev() {
    this.tabSelect = 0;
  }
  onNext() {
    this.tabSelect = 1;
  }
}

Queries -

1. How do I hide the Tab Header? (when I set display:none, the tab body also disappears)
2. How do I add side buttons inside mat-tab-group? (because when you do it normally, the buttons don't show up)
3. Any other way that would give me the desired result!

I'm sure that the correct answer would help a lot of people. Thank You.

Answer 1

It is of course strange way of making slideshow using Material Tabs, but possible.

How do I hide the Tab Header? (when I set display:none, the tab body also disappears)

Just add display:none to .mat-tab-label-container - works totally fine.

How do I add side buttons inside mat-tab-group? (because when you do it normally, the buttons don't show up)

You can't, its just not designed to project random content inside, look at template https://github.com/angular/components/blob/master/src/material/tabs/tab-group.html there is no custom html projection except tab content - just leave your buttons where they are.