is it possible to project the same content in multiple mat-steps?

Question

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.

Answer 1

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>

Answer 2

You can use embed a template ref using *ngTemplateOutlet with <ng-container> like this:

<mat-stepper>
  <mat-step label="do this">
    <ng-container *ngTemplateOutlet="stuff"/>
    <p>unique step 1 stuff...</p>
  </matstep>
  <mat-step label="do that">
    <ng-container *ngTemplateOutlet="stuff"/>
    <p>unique step 2 stuff...</p>
  </matstep>
</mat-stepper>
<ng-template #stuff>
  ...shared content...
</ng-template>