3

I am creating custom stepper using CDKStepper in angular 7,

I am using 

<cdk-step>
      <ng-template cdkStepLabel>Fill out your name 1</ng-template>
      <p>This is any content of "Step 1"</p>
</cdk-step>

and in stepper template - for navigation, I am using

  <ul class="nav nav-pills wizard-navigation-ul">
      <li class="step" *ngFor="let step of steps; let i = index;" [ngClass]="{'active': selectedIndex === i}">
          <a href="javascript:void()" (click)="onClick(i, step)" data-toggle="tab">{{step.stepLabel}}</a>
      </li>
  </ul>

and in Component.ts

onClick(index: number, step: any): void {
    console.log(step);   // here i want to console the title of the step clicked, in this case TEXT of this "<ng-template cdkStepLabel>Fill out your name 1</ng-template>"
    this.selectedIndex = index;
  }

How can I get the title that is stored in <ng-template cdkStepLabel>Fill out your name 1</ng-template>?

Vinay Sheoran
  • 528
  • 3
  • 15
  • Can you share your code on stackblitz/jsfiddle? – Sayan Apr 22 '19 at 10:12
  • you can take this exact example: https://stackblitz.com/angular/yodnynygpev?file=app%2Fcdk-custom-stepper-without-form-example.ts and in navigation where `step 1` and `step 2` are shown, I have to show the step name – Vinay Sheoran Apr 22 '19 at 10:22
  • rest is the same, except i added `` in `` . like this ``` Fill out your name 1

    This is any content of "Step 1"

    ```     – Vinay Sheoran Apr 22 '19 at 10:24
  • 1
    Using label I'm getting step label value but using CdkStepLabel not getting the inner html value. – Sayan Apr 22 '19 at 12:59

1 Answers1

1

Came across this and had to dig into the source code for a solution.

The CdkStepLabel directive has the TemplateRef as public. Therefore we can do the following within our CdkStepper child component:

<ng-container [ngTemplateOutlet]="selected.stepLabel.template"></ng-container>

(however you want to acces the correct step is up to you)

Hope this helps future searchers.

dCrux
  • 121
  • 5