Могу ли я программно переместить шаги мат-горизонтального степпера в угловой/угловой материал

Ответ 1

Да. Можно перейти к определенному степперу, используя свойство selectedIndex объекта MatStepper. Кроме того, MatStepper предоставляет открытые методы next() и previous(). Вы можете использовать их для перемещения вперед и назад.

В вашем шаблоне:

Добавьте идентификатор к вашему #stepper например #stepper. Затем в ваших goBack() и goForward() передайте идентификатор goForward():

<mat-horizontal-stepper #stepper>
    <!-- Steps -->
</mat-horizontal-stepper>    
<!-- second option -->
<div>
   <button (click)="goBack(stepper)" type="button">Back</button>
   <button (click)="goForward(stepper)" type="button">Next</button>
</div>

.. и в вашей машинописи:

import { MatStepper } from '@angular/material/stepper';

goBack(stepper: MatStepper){
    stepper.previous();
}

goForward(stepper: MatStepper){
    stepper.next();
}

Ссылка на демонстрацию стекаблиц.

Вы можете включить/отключить кнопки " Back и " Next ", используя следующее:

<button (click)="goBack(stepper)" type="button" 
        [disabled]="stepper.selectedIndex === 0">Back</button>
<button (click)="goForward(stepper)" type="button" 
        [disabled]="stepper.selectedIndex === stepper._steps.length-1">Next</button>

Ответ 2

В дополнение к ответу @Faisal, это мой взгляд на прыжок MatStepper без необходимости передавать шаг в аргументах.

Это полезно, когда вам нужно больше гибкости в манипулировании степпером, например, из Service или чего-то еще.

HTML:

<div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="6px">
  <button (click)="move(0)">1st</button>
  <button (click)="move(1)">2nd</button>
  <button (click)="move(2)">3rd</button>
  <button (click)="move(3)">4th</button>
</div>

Файл TS:

move(index: number) {
    this.stepper.selectedIndex = index;
}

Здесь демонстрация стекаблиц.

Ответ 3

Если вы хотите программно перейти к следующему шагу, и если вы используете линейный степпер, выполните следующие шаги:

• Создайте stepper следующим образом: <mat-horizontal-stepper linear #matHorizontalStepper>
• Определите mat-step следующим образом: <mat-step [completed]="isThisStepDone">
• Внутри mat-step создайте кнопку, чтобы перейти к следующему шагу следующим образом: <button (click)="next(matHorizontalStepper)">NEXT STEP</button>
• В .ts файле объявить MatStepper ссылка под названием степпер:
  @ViewChild('matHorizontalStepper') stepper: MatStepper;
• Кроме того, в файле .ts инициализируйте isThisStepDone как false: isThisStepDone: boolean = false;

• Затем напишите метод для кнопки СЛЕДУЮЩИЙ ШАГ с именем next():

  submit(stepper: MatStepper) {
   this.isThisStepDone = true;
   setTimeout(() => {           // or do some API calls/ Async events
    stepper.next();
   }, 1);
  }
  

Ответ 4

Вы также можете сделать это, указав фактический индекс степпера с помощью selectedIndex.

stackblitz: https://stackblitz.com/edit/angular-4rvy2s?file=app%2Fstepper-overview-example.ts

HTML:

<div class="fab-nav-container">
   <mat-vertical-stepper linear="false" #stepper>
       <mat-step *ngFor="let step of stepNodes; let i = index">
           <ng-template matStepLabel>
               <p> {{step.title}} </p>
           </ng-template>
       </mat-step>
   </mat-vertical-stepper>
</div>

<div class="button-container">
   <div class="button-grp">
      <button mat-stroked-button (click)="clickButton(1, stepper)">1</button>
      <button mat-stroked-button (click)="clickButton(2, stepper)">2</button>
      <button mat-stroked-button (click)="clickButton(3, stepper)">3</button>
   </div>
</div>

TS:

import {Component, OnInit, ViewChild} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import { MatVerticalStepper } from '@angular/material';
import { MatStepper } from '@angular/material';
export interface INodes {
    title: string;
    seq: number;
    flowId: string;
}
/**
 * @title Stepper overview
 */
@Component({
  selector: 'stepper-overview-example',
  templateUrl: 'stepper-overview-example.html',
  styleUrls: ['stepper-overview-example.scss'],
})
export class StepperOverviewExample implements OnInit {
  @ViewChild(MatVerticalStepper) vert_stepper: MatVerticalStepper;
  @ViewChild('stepper') private myStepper: MatStepper;

  stepNodes: INodes[] = [
    { title: 'Request Submission', seq: 1, flowId: 'xasd12'}, 
    { title: 'Department Approval', seq: 2, flowId: 'erda23'}, 
    { title: 'Requestor Confirmation', seq: 3, flowId: 'fsyq51'}, 
  ];

  ngOnInit() {
  }
  ngAfterViewInit() {
    this.vert_stepper._getIndicatorType = () => 'number';
  }
  clickButton(index: number, stepper: MatStepper) {
      stepper.selectedIndex = index - 1;
  }
}