Stepper: components inside step-content always get initialized #7985
Description
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)