Is there a way to lazy load a component within each mat-step?

Question

I am trying to implement a mat-stepper which has different components within each step. I need to pass data from the firs step to the next so I am basically using @ViewChild and @Input to do that. But, I want the component in each step to be initialized only when the control is moved to that step and not in the very beginning. I tried using the component within like how we would lazy load mat-tabs but it doesn't seem to work.Is there a workaround?

Answer 1

You can use something like that

<mat-vertical-stepper #stepper>
   <mat-step #first_step>
      <ng-container *ngIf="stepper.selected == null || stepper.selected == first_step">
      </ng-container>
   </mat-step>
   <mat-step #second_step>
      <ng-container *ngIf="stepper.selected == second_step">
      </ng-container>
   </mat-step>
   <mat-step #third_step>
      <ng-container *ngIf="stepper.selected == third_step">
      </ng-container>
   </mat-step>
</mat-vertical-stepper>

Note that the condition for the first step needs to include the check for null, too. Otherwise, you'll receive an ExpressionChangedAfterItHasBeenCheckedError.

Edit

You could also make it like this

<mat-vertical-stepper #stepper>
       <mat-step>
          <ng-container *ngIf="stepper.selected === 0 ">
          </ng-container>
       </mat-step>
<mat-vertical-stepper/>

Of course, "0" is related to the first step.

Answer 2

For reference, there is a built-in way of lazy rendering mat-step that is described in the Angular Material documentation.

If you have some content that you want to want to defer until the particular step is opened, you can put it inside an ng-template with the matStepContent attribute.

Here is an example:

<mat-vertical-stepper>
    <mat-step>
        <ng-template matStepLabel>Step 1</ng-template>
        <ng-template matStepContent>
            <p>This content was rendered lazily</p>
            <button mat-button matStepperNext>Next</button>
        </ng-template>
    </mat-step>
<mat-vertical-stepper>