I am trying to use mat-stepper
and the layout I am trying to make has the same content on both steps..
when on step 1, it would look like: | [step 1] do this -- [step 2] do that | | | -------- | -------------- | | this content is in both steps | ...unique step 1 content... |
when on step 2, it would look like:
[step 1] do this -- [step 2] do that | |
---|---|
this content is in both steps | ...unique step 2 content... |
So I am wondering, is there a way to accomplish this with content projection?
I was hoping I could just do something like:
<mat-stepper>
<mat-step label="do this">
<ng-content select="[stuff]"></ng-content>
<p>unique step 1 stuff...</p>
</matstep>
<mat-step label="do that">
<ng-content select="[stuff]"></ng-content>
<p>unique step 2 stuff...</p>
</matstep>
</mat-stepper>
<ng-template stuff>
...shared content...
</ng-template>
but that does not seem to work.
You can use mat-stepper like this:
<mat-stepper>
<mat-step label="do this">
<ng-container *ngTemplateOutlet="sharedContent"></ng-container>
<p>unique step 1 stuff...</p>
</mat-step>
<mat-step label="do that">
<ng-container *ngTemplateOutlet="sharedContent"></ng-container>
<p>unique step 2 stuff...</p>
</mat-step>
</mat-stepper>
<ng-template #sharedContent>
...shared content...
</ng-template>