Angular material stepper not showing

Question

I'm using angular material and all component working as well, but stepper is not working

this is he Html File The mat-slider is working but the mat-horizontal-stepper not working please take a look at the images

    <mat-slider min="1" max="100" step="1" value="1"></mat-slider>
    <mat-horizontal-stepper>
      <mat-step label="Step 1" state="phone">
        <p>Put down your phones.</p>
        <div>
          <button mat-button matStepperNext>Next</button>
        </div>
      </mat-step>
      <mat-step label="Step 2" state="chat">
        <p>Socialize with each other.</p>
        <div>
          <button mat-button matStepperPrevious>Back</button>
          <button mat-button matStepperNext>Next</button>
        </div>
      </mat-step>
      <mat-step label="Step 3">
        <p>You're welcome.</p>
      </mat-step>
    
      <!-- Icon overrides. -->
      <ng-template matStepperIcon="phone">
        <mat-icon>call_end</mat-icon>
      </ng-template>
      <ng-template matStepperIcon="chat">
        <mat-icon>forum</mat-icon>
      </ng-template>
    </mat-horizontal-stepper>

Shared Module I'm using the shared module and importing it

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";

import { MatSliderModule } from "@angular/material/slider";
import { MatButtonModule } from "@angular/material/button";
import { MatAutocompleteModule } from "@angular/material/autocomplete";
import { MatFormFieldModule } from "@angular/material/form-field";
import { MatInputModule } from "@angular/material/input";
import { MatButtonToggleModule } from "@angular/material/button-toggle";
import { MatTooltipModule } from "@angular/material/tooltip";
import { MatSidenavModule } from "@angular/material/sidenav";
import { MatIconModule } from "@angular/material/icon";
import { MatCheckboxModule } from "@angular/material/checkbox";
import { MatDialogModule } from "@angular/material/dialog";
import {MatStepperModule} from '@angular/material/stepper';
import {MatTabsModule} from '@angular/material/tabs';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MatSliderModule,
    MatButtonModule,
    MatAutocompleteModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonToggleModule,
    MatTooltipModule,
    MatSidenavModule,
    MatCheckboxModule,
    MatIconModule,
    MatDialogModule,
    MatStepperModule,
    MatTabsModule
  ],
  exports: [
    MatSliderModule,
    MatButtonModule,
    MatAutocompleteModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonToggleModule,
    MatTooltipModule,
    MatSidenavModule,
    MatCheckboxModule,
    MatIconModule,
    MatDialogModule,
    MatStepperModule,
    MatTabsModule
  ],
})
export class NgMatModule {}

Css File I'm also import the font and icons and the deeppurple theme

@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700|Roboto:300,400,500,600,700");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";

Answer 1

I had the same issue and struggled for quite a bit. I ended up creating a barebones stepper and then incrementally filled in the rest from the Material guide.

<mat-step label="Step 1">
  Step 1 content
</mat-step>

<mat-step label="Step 2">
  Step 2 content
</mat-step>

<mat-step label="Step 3">
  You are now done.
</mat-step>