Search code examples
angularangular-materialmat-tab

Labels are not displayed while using mat-tab

I am trying to have a simple tab view using angular material mat-tab-group.

app.module.ts and app.component.html file -

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import {MatToolbarModule} from '@angular/material/toolbar';
import {MatTabsModule} from '@angular/material/tabs';
import { FormsModule } from '@angular/forms';

import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatTabsModule,
    MatProgressSpinnerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
<mat-toolbar color="primary">
  <span>Your financial portfolio</span>
</mat-toolbar>

<div>
  <mat-tab-group>
    <mat-tab label="First">Content 1</mat-tab>
    <mat-tab label="Second">Content 2</mat-tab>
    <mat-tab label="Third">Content 3</mat-tab>
  </mat-tab-group>
</div>

enter image description here

enter image description here

Labels are not visible.

What am I doing wrong here ?

Solution

  • your code is true I think you changed color of .mat-tab-label, .mat-tab-link then test this in .css file:

    .mat-tab-label, .mat-tab-link {
    color: rgba(0,0,0,.87) !important;
}