web-dev-qa-db-fra.com

Angular Matériau - Empêchez mat-stepper de naviguer entre les marches

J'ai un mat-horizontal-stepper où je définis la propriété linéaire comme true. Lorsque toutes les étapes sont valides à partir de maintenant, je peux accéder aux étapes précédentes en cliquant sur l'en-tête ou l'étiquette. Je ne veux pas de cette propriété. 

J'ai besoin de naviguer uniquement à travers les boutons. 

J'ai essayé de désactiver la fonction de pointeur avec: 

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

mais cela n'a pas fonctionné. 

J'ai besoin d'arrêter de naviguer en cliquant sur en-tête ou d'activer une fonction en cliquant sur l'en-tête stepper.

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

Définissez editable sur false pour mat-step

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

Pour obtenir un événement sur l'en-tête, cliquez sur this-

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

Dans ts fichier le composant - 

stepClick(ev) {console.log(ev)}
4
satyendra kumar

Ce que vous avez posté à l'origine:

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

fonctionne, tant que vous ajoutez ::ng-deep à la classe CSS. Comme ça:

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

Assurez-vous également que vous utilisez le horizontal stepper au lieu du vertical one. Cela importe évidemment lorsque vous appelez la classe CSS appropriée.

3
CAlex

Pour activer une fonction lorsque vous cliquez sur l'en-tête stepper, vous pouvez vous abonner à MatStepper.selectionChange. Il est émis lors du changement d’étape et vous donne des informations sur l’étape précédente et sur l’étape sélectionnée.

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

Lorsque l'étape sélectionnée est la dernière, vous pouvez l'utiliser pour définir editable = false dans toutes les étapes précédentes:

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