title: cdkStepLabel - ng-template - innerHTML
body: <p>I am creating custom stepper using CDKStepper in angular 7, </p>
  
  <p>I am using </p>
  
  <pre><code>&lt;cdk-step&gt;
        &lt;ng-template cdkStepLabel&gt;Fill out your name 1&lt;/ng-template&gt;
        &lt;p&gt;This is any content of "Step 1"&lt;/p&gt;
  &lt;/cdk-step&gt;
  </code></pre>
  
  <p>and in stepper template - for navigation, I am using</p>
  
  <pre><code>  &lt;ul class="nav nav-pills wizard-navigation-ul"&gt;
        &lt;li class="step" *ngFor="let step of steps; let i = index;" [ngClass]="{'active': selectedIndex === i}"&gt;
            &lt;a href="javascript:void()" (click)="onClick(i, step)" data-toggle="tab"&gt;{{step.stepLabel}}&lt;/a&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  
  <p>and in Component.ts</p>
  
  <pre><code>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 "&lt;ng-template cdkStepLabel&gt;Fill out your name 1&lt;/ng-template&gt;"
      this.selectedIndex = index;
    }
  </code></pre>
  
  <p>How can I get the title that is stored in <code>&lt;ng-template cdkStepLabel&gt;Fill out your name 1&lt;/ng-template&gt;</code>?</p>