CODEWITHSUNDEEP
angularmat-stepper
FZaman
FZaman

Reputation: 73

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

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?

Upvotes: 7

Views: 8974

Answers (5)

Anthony Nahas
Anthony Nahas

Reputation: 11

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>

Upvotes: 0

Bulbul Sarker
Bulbul Sarker

Reputation: 102

//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;
}

Upvotes: 0

Alireza Ebrahimkhani
Alireza Ebrahimkhani

Reputation: 551

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

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

Upvotes: -1

Aurelien
Aurelien

Reputation: 369

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>

Upvotes: 13

Ahmed Samir Elshazly
Ahmed Samir Elshazly

Reputation: 229

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.

Upvotes: 11

Related Questions