Components: Stepper: components inside step-content always get initialized

[actra-gschuster]

Bug, feature request, or proposal:

Bug report

What is the expected behavior?

Initialize components when step is activated

What is the current behavior?

All components get initialized upon page load

What are the steps to reproduce?

Given template:

<mat-horizontal-stepper linear>
    <mat-step label="First">
        <my-first></my-first>
    </mat-step>
    <mat-step label="Second">
        <my-second></my-second>
    </mat-step>
</mat-horizontal-stepper>

Both components have a console.log() inside the constructor and ngAfterViewInit to check when they get called - they always get called upon page load.

I also tried with ng-containers around the components, "guarded" by ng-ifs - same problem!

<mat-horizontal-stepper linear>
    <mat-step label="First">
        <ng-container *ngIf="isActiveStep('First')">
            <my-first></my-first>
        </ng-container>
    </mat-step>
    <mat-step label="Second">
        <ng-container *ngIf="isActiveStep('Second')">
            <my-second></my-second>
        </ng-container>
    </mat-step>
</mat-horizontal-stepper>

What is the use-case or motivation for changing an existing behavior?

Instantiate the components when the step is active / re-instantiate when an already visited step is re-visited.
This way the components could do some magic upon instantiation - and only then, when the step is currently active.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Latest of all (all RCs / GIT builds from today)

[actra-gschuster]

Nevermind, seems I messed up the whole asynchronity when checking the currently active step, seems I got it fixed.

[ajamaeen]

How did you fix the issue?

[kwiesmueller]

@actra-gschuster could use this information as well.

[actra-gschuster]

Sorry, I don't remeber it and as I'm not working on that customer project anymore I can't check the code.

[MikeKovetsky]

Try adding one more wrapper with *ngIf that checks current index.

<flow-stepper linear #flowStepper>
  <cdk-step *ngFor="let flowComponent of flowSteps; let i = index"  [label]="flowComponent.stepName"> // let i = index is added
      <ng-container *ngIf="i === flowStepper.selectedIndex"> // *ngIf is added
        <ng-container
          *ngxComponentOutlet="flowComponent.component; context: { stepperTemplate: flowStepper.stepperTemplate }">
        </ng-container>
      </ng-container>
    </cdk-step>
  </flow-stepper>

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}