How to hide mat-tab-header with nested tab groups, hide for outer mat-tab-group without hiding for inner

Question

I have html essentially

<mat-tab-group>
    <mat-tab>
        <mat-tab-group>
            <mat-tab>
            </mat-tab>
        </mat-tab-group>
    </mat-tab>
</mat-tab-group>

How can I use css (or any method really) to hide the outer tabs groups mat-tab-header element, but not affect the inner tab header?

Answer 1

I highly recommend you to use this custom directive instead of using css.

import { Directive, ElementRef, OnInit } from "@angular/core";

@Directive({
  selector: "[header-less-tabs]",
})
export class HeaderLessTabsDirective implements OnInit {
  constructor(private eleRef: ElementRef) {}

  ngOnInit(): void {
    this.eleRef.nativeElement.children[0].style.display = "none";
  }
}

It's very simple and reusable. usage example:

<mat-tab-group header-less-tabs>
    <mat-tab>
        <mat-tab-group>
            <mat-tab>
            </mat-tab>
        </mat-tab-group>
    </mat-tab>
</mat-tab-group>