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?

Hirza

Answer 1

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>

Ugh

hi i tried this, now i have a problem with stepControl, i reference a component inside as [stepControl]="myComponent" and #myComponent, but with ng-template it does not exist yet error TS2339: Property 'successForm' does not exist on type 'MintComponent' is there a way to fix that? – Crampon

Answer 2

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.

Gynarchy

Answer 3

//In html file
<mat-vertical-stepper (selectionChange)="selectionChanged($event)">
    <mat-step #first_step>
        <ng-container *ngIf="stepNo == 0">
            //load component name here
        </ng-container>
    </mat-step>
    <mat-step>
        <ng-container ngIf="stepNo == 1">
            //load component name here
        </ng-container>
    </mat-step>
    <mat-step>
        <ng-container ngIf="stepNo == 2">
            //load component name here
        </ng-container>
    </mat-step>
</mat-vertical-stepper>

//In ts file
stepNo: number = 0;
selectionChanged2($event: StepperSelectionEvent) {
    console.log('$event.selectedIndex = ', $event.selectedIndex);
    this.stepNo = $event.selectedIndex;
}

Jetport

Answer 4

use stepper.selectedIndex

<mat-vertical-stepper #stepper>
    <!-- Step 1 -->
    <mat-step>
        <ng-template matStepLabel>Step 1</ng-template>
        <ng-template matStepContent>
          <ng-container *ngIf="stepper.selectedIndex === 0">
            <p>This content was rendered lazily</p>
            <button mat-button matStepperNext>Next</button>
           </ng-container>
        </ng-template>
    </mat-step>
       <!-- Step 2 -->
    <mat-step>
        <ng-template matStepLabel>Step 2</ng-template>
        <ng-template matStepContent> 
           <ng-container *ngIf="stepper.selectedIndex === 1">
             <p>This content was rendered lazily - content 2</p>
             <button mat-button matStepperNext>Next 2</button>
           </ng-container>
        </ng-template>
    </mat-step>
<mat-vertical-stepper>

Cerebral

Answer 5

You can use ngx-mat-step-lazy-load third party package

You can find from here ngx-mat-step-lazy-load

Kalie