Menu
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?
807
You have to hide a specific div that gets an id depending on the quantity of tabs. That is why your hide-directive on the <mat-tab> directive does not work. You have to write a directive that targets these elements using the classes as selector.
The solution 🕶 First, we need to add a click listener on the mat-tab-group and disable all tabs because if tabs are not disabled then the user will be able to navigate on them and we want to navigate on tabs conditionally not manually.
By default, the tab group will not change its height to the height of the currently active tab. To change this, set the dynamicHeight input to true. The tab body will animate its height according to the height of the active tab.
mat-tab-group is used mainly for navbar requirements when we have multiple tabs to display. Approach: First, install the angular material using the above-mentioned command. After completing the installation, Import 'MatTabsModule' from '@angular/material/tabs' in the app.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
