How to pass a template inside mat-stepper

Question

I would like to do that :

<ng-template #content>
  <mat-step>step 1</mat-step>
  <mat-step>step 2</mat-step>
</ng-template>

<mat-horizontal-stepper>
  <ng-container *ngTemplateOutlet="content"></ng-container>
</mat-horizontal-stepper>

but i get this error

ERROR Error: StaticInjectorError(AppModule)[MatStep -> MatStepper]: StaticInjectorError(Platform: core)[MatStep -> MatStepper]: NullInjectorError: No provider for MatStepper!

I think this is because mat-step inject a mat-stepper in it's constructor https://github.com/angular/material2/blob/master/src/lib/stepper/stepper.ts#L53

So I tryed to pass stepper in the context with ngOutletContext

<mat-horizontal-stepper #ContainerStepper="matHorizontalStepper">
  <ng-container *ngTemplateOutlet="content" ngOutletContext="{$implicit:{stepper:ContainerStepper}}"></ng-container>
</mat-horizontal-stepper>

but this doesn't work.

Any idea ?

Answer 1

You can try:

<ng-template #step1Template>
  <form>
    <mat-form-field>
      <input matInput placeholder="Last name, First name" required>
    </mat-form-field>
  </form>
</ng-template>

<ng-template #step2Template>
  <form>
    <mat-form-field>
      <input matInput placeholder="Address" required>
    </mat-form-field>
  </form>
</ng-template>

<mat-horizontal-stepper>
  <mat-step [stepControl]="firstFormGroup">
    <!-- stepper title !-->
    <ng-template matStepLabel>Fill out your name</ng-template>
    <!-- end stepper title !-->

    <!-- stepper content !-->
    <ng-container *ngTemplateOutlet="step1Template"></ng-container>
    <!-- end stepper content !-->

    <!-- stepper footer !-->
    <div>
      <button mat-button matStepperNext>Next</button>
    </div>
    <!-- end stepper footer !-->
  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
    <!-- stepper title !-->
    <ng-template matStepLabel>Fill out your address</ng-template>
    <!-- end stepper title !-->

    <!-- stepper content !-->
    <ng-container *ngTemplateOutlet="step2Template"></ng-container>
    <!-- end stepper content !-->

    <!-- stepper footer !-->
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
    <!-- end stepper footer !-->
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    You are now done.
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>
</mat-horizontal-stepper>

<mat-vertical-stepper>
  <mat-step [stepControl]="firstFormGroup">
    <!-- stepper title !-->
    <ng-template matStepLabel>Fill out your name</ng-template>
    <!-- end stepper title !-->

    <!-- stepper content !-->
    <ng-container *ngTemplateOutlet="step1Template"></ng-container>
    <!-- end stepper content !-->

    <!-- stepper footer !-->
    <div>
      <button mat-button matStepperNext>Next</button>
    </div>
    <!-- end stepper footer !-->
  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
    <!-- stepper title !-->
    <ng-template matStepLabel>Fill out your address</ng-template>
    <!-- end stepper title !-->

    <!-- stepper content !-->
    <ng-container *ngTemplateOutlet="step2Template"></ng-container>
    <!-- end stepper content !-->

    <!-- stepper footer !-->
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
    <!-- end stepper footer !-->
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    You are now done.
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>
</mat-vertical-stepper>