I want to use this : https://material.angular.io/components/stepper/overview
but for the purposes of layout (which can be dynamic) where I may or may not have elements come in between the clickable title of a step and it's content, I want to have the content of the stepper (everything below the circular icon and the Label of the step) be outside of the DOM tag </mat-horizontal-stepper>.
Some other components accomplish this by naming a certain variable within the step's tag with the template name have it declared like so, later in the DOM.
If I do this, however :
<div>
<mat-horizontal-stepper labelPosition="bottom" #stepper class="width">
<mat-step>
<ng-template matStepLabel>Prerequisite Check</ng-template>
<div [ngTemplateOutlet]="first_step"></div>
</mat-step>
<mat-step>
<ng-template matStepLabel>Check Account Readiness</ng-template>
<div [ngTemplateOutlet]="second_step"></div>
</mat-step>
<mat-step>
<ng-template matStepLabel>Open</ng-template>
<div [ngTemplateOutlet]="third_step"></div>
</mat-step>
<mat-step>
<ng-template matStepLabel>Migration</ng-template>
<div [ngTemplateOutlet]="fourth_step"></div>
</mat-step>
<mat-step>
<ng-template matStepLabel>Deletion Now</ng-template>
<div [ngTemplateOutlet]="fith_step"></div>
</mat-step>
</mat-horizontal-stepper>
</div>
<div class="card shadow margin-top controlled-height">
<ng-template #first_step>
<div>first_step</div>
</ng-template>
<ng-template #second_step>
<div>second_step</div>
</ng-template>
<ng-template #third_step>
<div>third_step</div>
</ng-template>
<ng-template #fourth_step>
<div>fourth_step</div>
</ng-template>
<ng-template #fith_step>
<div>fith_step</div>
</ng-template>
</div>
The content shows up but inside the first div that contains the stepper, not the card.
my second attempt went as follows (I inverted the caller and the called) :
<div>
<mat-horizontal-stepper labelPosition="bottom" #stepper class="width">
<mat-step>
<ng-template matStepLabel>Prerequisite Check</ng-template>
<ng-template #first_step>
<div>first_step</div>
</ng-template>
</mat-step>
<mat-step>
<ng-template matStepLabel>Check Account Readiness</ng-template>
<ng-template #second_step>
<div>second_step</div>
</ng-template>
</mat-step>
<mat-step>
<ng-template matStepLabel>Open</ng-template>
<ng-template #third_step>
<div>third_step</div>
</ng-template>
</mat-step>
<mat-step>
<ng-template matStepLabel>Migration</ng-template>
<ng-template #fourth_step>
<div>fourth_step</div>
</ng-template>
</mat-step>
<mat-step>
<ng-template matStepLabel>Deletion Now</ng-template>
<ng-template #fith_step>
<div>fith_step</div>
</ng-template>
</mat-step>
</mat-horizontal-stepper>
</div>
<div class="card shadow margin-top controlled-height">
<div [ngTemplateOutlet]="first_step"></div>
<div [ngTemplateOutlet]="second_step"></div>
<div [ngTemplateOutlet]="third_step"></div>
<div [ngTemplateOutlet]="fourth_step"></div>
<div [ngTemplateOutlet]="fith_step"></div>
</div>
this time the content showed up where I intended it to but all were visible at the same time.
is separating title and content in matstepper possible for the material stepper?
To sum it up : I want to have the content inside <mat-step> outside of </mat-horizontal-stepper> (except matStepLabel, I don't care where that must go).
