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

Answer 2

Hello here I leave an example, this works for me. The key is in ng-template mat-tab-label inside it you can add a span and color the text black.

<mat-tab-group>
  <mat-tab>
    <ng-template mat-tab-label>
      <span style="color: black;">First</span>
    </ng-template>
    Content 1
  </mat-tab>
  <mat-tab>
    <ng-template mat-tab-label>
      <span style="color: black;">Second</span>
    </ng-template>
    Content 2
  </mat-tab>
  <mat-tab>
    <ng-template mat-tab-label>
      <span style="color: black;">Third</span>
    </ng-template>
    Content 3
  </mat-tab>
</mat-tab-group>