title: Angular CDK Stepper Footer template through ngTemplateOutlet
body: <p>I am trying to create a generic stepper component using Angular CDK Stepper as mention here <a href="https://material.angular.io/guide/creating-a-custom-stepper-using-the-cdk-stepper" rel="nofollow noreferrer">https://material.angular.io/guide/creating-a-custom-stepper-using-the-cdk-stepper</a>.</p>
  
  <p>I want to pass stepper's header and footer template through template references by using ngTemplateOutlet.  </p>
  
  <p>Templates are not working when I pass cdkStepperPrevious,cdkStepperNext in the buttons to them.</p>
  
  <p>Code can be found here <a href="https://stackblitz.com/edit/angular-bgyqqz-r8axmr" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-bgyqqz-r8axmr</a></p>
  
  <pre><code>&lt;ng-template #stepperHeader&gt;
    &lt;header&gt;
      &lt;h2&gt; Header&lt;/h2&gt;
    &lt;/header&gt;
  &lt;/ng-template&gt;
  &lt;ng-template #stepperFooter&gt;
      &lt;button class="example-nav-button" cdkStepperPrevious&gt;Next&lt;/button&gt;
      &lt;button class="example-nav-button" cdkStepperNext&gt;Previous&lt;/button&gt;
  &lt;/ng-template&gt;
  &lt;example-custom-stepper [headerTemplate]="stepperHeader" [footerTemplate]="stepperFooter"&gt;
  
    &lt;cdk-step&gt; &lt;p&gt;This is any content of "Step 1"&lt;/p&gt; &lt;/cdk-step&gt;
    &lt;cdk-step&gt; &lt;p&gt;This is any content of "Step 2"&lt;/p&gt; &lt;/cdk-step&gt;
  &lt;/example-custom-stepper&gt;
  
  and in my example-custom-stepper component
  
  &lt;section class="example-container"&gt;
     &lt;ng-container [ngTemplateOutlet]="headerTemplate"&gt;&lt;/ng-container&gt;
    &lt;div [style.display]="selected ? 'block' : 'none'"&gt;
      &lt;ng-container [ngTemplateOutlet]="selected.content"&gt;&lt;/ng-container&gt;
    &lt;/div&gt;
  
    &lt;footer class="example-step-navigation-bar"&gt;
      &lt;ng-container [ngTemplateOutlet]="footerTemplate"&gt;&lt;/ng-container&gt;
    &lt;/footer&gt;
  &lt;/section&gt;
  
  </code></pre>
  
  <p>Error</p>
  
  <p>preview-4adb70f742b91f09679fb.js:1 ERROR Error: StaticInjectorError(AppModule)[CdkStep -> CdkStepper]: 
    StaticInjectorError(Platform: core)[CdkStep -> CdkStepper]: 
      NullInjectorError: No provider for CdkStepper!
      at NullInjector.get (injector.ts:43)
      at resolveToken (injector.ts:346)
      at tryResolveToken (injector.ts:288)
      at StaticInjector.get (injector.ts:168)
      at resolveToken (injector.ts:346)
      at tryResolveToken (injector.ts:288)
      at StaticInjector.get (injector.ts:168)
      at resolveNgModuleDep (ng_module.ts:125)
      at NgModuleRef_.get (refs.ts:507)
      at resolveDep (provider.ts:423)</p>