CODEWITHSUNDEEP
angularangular-materialangular-material2angular-material-stepper
Sathyamoorthy Ponnusamy
Sathyamoorthy Ponnusamy

Reputation: 161

Angular Material - Prevent mat-stepper from navigating between steps

I have a mat-horizontal-stepper where I set linear property as true. When all the steps are valid as of now I can navigate to previous steps by clicking the header or label. I don't want that property.

I need to navigate only through buttons.

I tried disabling pointer function with: 

    .mat-horizontal-stepper-header{
       pointer-events: none;
     }

but it didn't worked.

I need either to stop navigating by clicking header or fire a function on clicking the stepper header.

Upvotes: 12

Views: 37866

Answers (7)

voukvouk
voukvouk

Reputation: 121

i had a similar issue as you had, and what i did was:

  1. In html, I configured [editable] and [completed] as false

<mat-step [completed]="false" [editable]="false">

  1. In the .ts file, corresponding action will trigger the following:
this.stepper.selected.completed = true;
this.stepper.next();

And of course, enabled linear mode.

Upvotes: 12

Vishal Chavan
Vishal Chavan

Reputation: 404

I tried this but not worked.

 ::ng-deep .mat-horizontal-stepper-header {
        pointer-events: none !important;
    }

Then i tried this.

.mat-step-header {
            pointer-events: none !important;
        }

This worked absolutely fine .

Thank You

Upvotes: 1

M Zishan
M Zishan

Reputation: 41

.mat-stepper-horizontal { pointer-events: none; }

Upvotes: -1

CAlex
CAlex

Reputation: 1140

What you originally posted:

.mat-horizontal-stepper-header{
    pointer-events: none;
}

does work, as long as you add ::ng-deep to the CSS class. Like this:

::ng-deep .mat-horizontal-stepper-header {
    pointer-events: none !important;
}

Also make sure you are using the horizontal stepper instead of the vertical one. This obviously matters when calling the appropriate CSS class.

Upvotes: 13

satyendra kumar
satyendra kumar

Reputation: 759

To get event on header click use this-

<mat-horizontal-stepper (selectionChange)="stepClick($event)" [linear]="isLinear" #stepper="matHorizontalStepper">

In ts file the component - 

stepClick(ev) {console.log(ev)}

Upvotes: 7

Milan
Milan

Reputation: 61

Set editable to false for mat-step

<mat-step editable="false"> ... </mat-step>

Upvotes: 4

Mel
Mel

Reputation: 6065

To fire a function when clicking the stepper header, you can subscribe to MatStepper.selectionChange. It is emitted when switching steps and gives you information about the previous step and the selected step.

html:

<mat-horizontal-stepper #stepper[linear]="true">
  <mat-step label="firstStep">
    ...
  </mat-step>
</mat-horizontal-stepper>

ts:

class ExampleComponent implements OnInit {
  @ViewChild('stepper') stepper: MatStepper;

  ngOnInit() {
    this.stepper.selectionChange.subscribe(selection => {
       console.log(selection.selectedStep)
       console.log(selection.previouslySelectedStep)
    }
 }

When the selected step is the last one, you could use this to set editable = false in all the previous steps:

this.stepper._steps.forEach(step => step.editable = false);

Upvotes: 3

Related Questions