Stepper: components inside step-content always get initialized

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)

[ajamaeen]

How did you fix the issue?

[MikeKovetsky]

Try adding one more <ng-container> 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>