Labels are not displayed while using mat-tab

Question

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>

Labels are not visible.

What am I doing wrong here?

Answer 1

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; }