1

I use a mat stepper in my app. But depending on the user action on one step, the following step will be different (the component shown won't be the same). And in one case, I need to display 2 pages instead of one for this next step. Is there a way to divide a mat step into 2 pages, or add a step dynamically?

Thank you

Edric
  • 24,639
  • 13
  • 81
  • 91
Manon Ingrassia
  • 270
  • 3
  • 14

2 Answers2

2

You could create a dynamic array of FormGroups that you change depending on your questions :

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

Here is a running stackblitz based on the angular material example.

ibenjelloun
  • 7,425
  • 2
  • 29
  • 53
  • This would work if each step was the same thing, which is absolutely not my case, every step is completely different. – Manon Ingrassia Jul 02 '18 at 13:22
  • Yes I understand, I just made it simple for the example. To make different kind of questions you could create custom templates. I'll try to change the example with templates later. – ibenjelloun Jul 02 '18 at 13:28
  • Here is a little more complexe example with two different kind of questions : https://stackblitz.com/edit/stackoverflow-51058549-2 – ibenjelloun Jul 02 '18 at 14:05
0

For adding a step dynamically in MatStepper, you can do like this,

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

To display two pages in one step, you can use mat-tab

khush
  • 2,702
  • 2
  • 16
  • 35
  • Thank you for your answer. I thought about it before posting the answer, but it do not depends on any variable or field, it depends on which button the user clicks on. I can still use this solution by creating boolean variable and functions to switch the values. I would have liked to avoid creating many variables and functions to make it work, but if there is no other way I think I will use this solution. – Manon Ingrassia Jul 04 '18 at 12:17