How to Disable ripples on mat-step (mat-horizontal-stepper)

[tahir-jamil]

How can we disable ripple effect on angular material stepper

 <mat-horizontal-stepper  [linear]="isLinear" #stepper>
            <mat-step disableRipple="true" [stepControl]="firstFormGroup">
              <ng-template matStepLabel>User Information</ng-template>
                <form [formGroup]="firstFormGroup">
                <div>
                  <p class="sec-color f-18 open-sans f-300 text-center alignInfo">Select your Industries</p>
                  <tu-text-field-web textfieldtype='authentication' backgroundColor="white" placeholder="Full Name"></tu-text-field-web>
                  <tu-text-field-web textfieldtype='authentication' backgroundColor="white" placeholder="Organisation name"></tu-text-field-web>
                  <tu-text-field-web textfieldtype='authentication' backgroundColor="white" text="+92"></tu-text-field-web>

                </div>
              </form>
            </mat-step>
            <mat-step [stepControl]="secondFormGroup">
              <ng-template matStepLabel>Industries</ng-template>
                <form [formGroup]="secondFormGroup">

                <div>
                  <p class="sec-color f-18 open-sans f-300 text-center alignInfo">Select your Industries</p>

                  <div class="flex-wrap">
                    <p *ngFor="let item of badges" class="badges-text text-muted open-sans v-l-m f-13 text-center">{{item.text}}</p>
                  </div>
                </div>
              </form>
            </mat-step>
            <mat-step [stepControl]="secondFormGroup">
              <ng-template matStepLabel>Select your business model</ng-template>
                <form [formGroup]="secondFormGroup">

                <div>
                  <p class="sec-color f-18 open-sans f-300 text-center alignInfo">Select your Industries</p>

                  <div class="flex-wrap">
                    <p *ngFor="let item of badgesBusinessModel" class="badges-text text-muted open-sans v-l-m f-13 text-center">{{item.text}}</p>
                  </div>
                </div>
              </form>
            </mat-step>

            <mat-step>
              <ng-template matStepLabel>Location</ng-template>
              <agm-map [latitude]="lat" [longitude]="lng">
                <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
              </agm-map>
            </mat-step>

          </mat-horizontal-stepper>

[yaseen-nadaf]

When can we use this disableRipple property, because when I am using it currently, am getting an error that its not a known property of mat-step or mat-vertical-stepper or mat-horizontal-stepper

[Borizzio]

@yaseen-nadaf The property disableRipple is for Angular material 8.0.0 so you need to upgrade your project to Angular 8. If you have a previous version you can't use it.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}