angularmat-stepperangular-content-projection

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


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.


Solution

  • 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>