Angular material design <mat-step> data not showing

Question

I am install Material in angular and after add stepper html code, css and import all mat modules in app.module.ts file but now stepper is showing but stepper data not visible in html

<mat-stepper  #stepper>
  <mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Fill out your name</ng-template>
      <mat-form-field>
        <mat-label>Name</mat-label>
        <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
      </mat-form-field>
      <div>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup" label="Fill out your address">
    <form [formGroup]="secondFormGroup">
      <mat-form-field>
        <mat-label>Address</mat-label>
        <input matInput formControlName="secondCtrl" placeholder="Ex. 1 Main St, New York, NY"
               required>
      </mat-form-field>
      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    <p>You are now done.</p>
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>
</mat-stepper>

Module

import:[
MatCheckboxModule,
    MatDialogModule,
    MatStepperModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatSlideToggleModule,
    MatButtonToggleModule,
    MatIconModule
],
declarations:[
HomeComponent
]

I am install Material in angular and after add stepper html code, css and import all mat modules in app.module.ts file but now stepper is showing but stepper data not visible in html

Answer 1

As stated in Getting Started with Angular Material, you need to import the BrowserAnimationsModule to your application.

3. Set up browser animations for Angular Material:

Importing the BrowserAnimationsModule into your application enables Angular's animation system. Declining this will disable most of Angular Material's animations.

For the non-standalone component Angular application, add BrowserAnimationsModule into the imports array of the root module.

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

@NgModule ({
  imports: [
    BrowserAnimationsModule,
  ],
  ...
})
export class AppModule {}

For the standalone component Angular application, import provideAnimations.

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

bootstrapApplication(App, { providers: [provideAnimations()] });