Угловой 2+: разделите шаг коврика на 2 страницы

Question

Я использую коврик в своем приложении. Но в зависимости от действий пользователя на одном шаге следующий шаг будет другим (показанный компонент не будет таким же). И в одном случае мне нужно отобразить 2 страницы вместо одной для этого следующего шага. Есть ли способ разделить шаг циновки на 2 страницы или добавить шаг динамически?

Спасибо

Answer 1

Для добавления шага динамически в MatStepper, вы можете сделать это,

<mat-horizontal-stepper>
<mat-step>
    <input type="text" [(ngModel)]="name" name="nm">
</mat-step>
<mat-step *ngIf="name === 'John'">
      <!---- your code ------->
</mat-step>
<mat-step *ngIf="name === 'Jane'">
      <!---- your code ------->
</mat-step>

Чтобы отобразить две страницы за один шаг, вы можете использовать mat-tab

Answer 2

Вы можете создать динамический массив FormGroups, который вы меняете в зависимости от ваших вопросов:

<mat-step *ngFor="let stepFormGroup of stepFormGroups;
 let i = index " [stepControl]="stepFormGroup">
    <form [formGroup]="stepFormGroup">...

Вот бегущий стек на примере углового материала.